jQuery zdarzenia

Zdarzenia w jQuery obsługuje się bardzo prosto.

Istnieją dwie proste metody bindowania, w zależności od kontekstu w którym je wykorzystamy:

$("element").metoda(function()) - jeżeli dany element DOM istnieje na stronie np.

Code:

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>

<div id="List">
</div>
<input type="button" value="Przycisk" id="przycisk"/>
<script type="text/javascript">
    $(document).ready(function () {
        $("#przycisk").click(function () {
            $("#List").append("Text");
            return false;
        });
    })
</script>

W tym przypadku przycisk istnieje już na formatce i dodajemy do niego zdarzenie.

W przypadku gdy element nie istnieje na stronie i chcemy dynamicznie dodać do niego zdarzenie, korzystamy z metody .on("event", function(event){}). Przykład:

Code:

<div id="List">
    <p>Click me!</p>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#List").on("click", "p", function () {
            $("#List").append('<p>Click Me!<p/><br/>');
        });
    })
</script>

W tym przypadku dodajemy do formularza kolejne paragrafy, które mają automatycznie zbindowane zdarzenie Click.


Inne przydatne metody:
.one() - binduje zdarzenie na jedno użycie (po pierwszym wywołaniu zdarzenie jest usuwane z elementu)
.unbind([nazwa_eventu]) - usuwa jedno bądź też wszystkie (brak nazwy_eventu) zdarzenia z elementu
$("element").trigger("click") - wywołanie ręczne zdarzenia