W jQuery, jak dołączyć zdarzenia do dynamicznych elementów html? [duplikat]

Czasami robienie tego (najczęściej głosowana ODPOWIEDŹ) nie zawsze wystarczy:

$('body').on('click', 'a.myclass', function() {
    // do something
});

Może to być problem z powodu wywoływania procedur obsługi zdarzeń. Jeśli to zrobisz, ale powoduje to problemy ze względu na kolejność, w jakiej jest obsługiwane.. Zawsze można to zawinąć w funkcję, która po wywołaniu "odświeża" słuchacza.

Na przykład:

function RefreshSomeEventListener() {
    // Remove handler from existing elements
    $("#wrapper .specific-selector").off(); 

    // Re-add event handler for all matching elements
    $("#wrapper .specific-selector").on("click", function() {
        // Handle event.
    }
}

Ponieważ jest to funkcja, ilekroć ustawiam mój słuchacz w ten sposób, zwykle wywołuję ją w dokumencie gotowe:

$(document).ready(function() {
    // Other ready commands / code

    // Call our function to setup initial listening
    RefreshSomeEventListener();
});

Następnie, za każdym razem, gdy dodasz jakiś dynamicznie dodany element, wywołaj tę metodę ponownie:

function SomeMethodThatAddsElement() {
    // Some code / AJAX / whatever.. Adding element dynamically

    // Refresh our listener, so the new element is taken into account
    RefreshSomeEventListener();
}

Miejmy nadzieję, że to pomoże!

Pozdrawiam,

Po jQuery 1.7 preferowanymi metodami są .on () i .off()

Odpowiedź Seana pokazuje przykład.

Now Deprecated:

Użyj funkcji jQuery.live() oraz .die(). Dostępny w jQuery 1.3x

From the docs:

Aby wyświetlić tekst każdego akapitu w pole alarmowe po kliknięciu:

$("p").live("click", function(){
  alert( $(this).text() );
});

Również wtyczka livequery robi to i ma wsparcie dla kolejnych wydarzeń.

Jeśli dodajesz stos anchorów do DOM, spójrz na delegację zdarzeń.

Oto prosty przykład:

$('#somecontainer').click(function(e) {   
  var $target = $(e.target);   
  if ($target.hasClass("myclass")) {
    // do something
  }
});

Wiąże funkcję obsługi zdarzenia (np. click) dla wszystkich dopasowanych elementów. Może również wiązać niestandardowe zdarzenia.

Link text

$(function(){
    $(".myclass").live("click", function() {
        // do something
    });
});

Możesz powiązać Zdarzenie pojedynczego kliknięcia ze stroną dla wszystkich elementów, bez względu na to, czy są już na tej stronie, czy też pojawią się w przyszłości, w ten sposób:

$(document).bind('click', function (e) {
   var target = $(e.target);
   if (target.is('.myclass')) {
      e.preventDefault(); // if you want to cancel the event flow
      // do something
   } else if (target.is('.myotherclass')) {
      e.preventDefault();
      // do something else
   }
});

W jQuery 1.7 i późniejszych zaleca się użycie .on() zamiast bind lub innej metody delegowania zdarzeń, ale .bind() nadal działa.

If your on jQuery 1.3 + then use .live()

Wiąże handler ze zdarzeniem (jak kliknij) dla wszystkich obecnych - i przyszłych - dopasowany element. Może również wiązać niestandardowe wydarzenia.

Chcesz użyć funkcji live(). Zobacz dokumenty .

Na przykład:

$("#anchor1").live("click", function() {
    $("#anchor1").append('<a class="myclass" href="#">test4</a>');
});