poniedziałek, 12 listopada 2012

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

2 komentarze:

  1. A metody "live", "delegate" ?

    OdpowiedzUsuń
    Odpowiedzi
    1. live - deprecated
      delegate - superseded by .on("")

      Co prawda te metody dalej istnieją, ale nie są już zalecane.

      Usuń