jak dołączyć obsługę zdarzeń jquery do nowo wprowadzonego html?

Question

Jak mogę użyć .on(), jeśli HTML nie jest jeszcze wygenerowany? Strona jQuery mówi:

Jeśli do strony wstrzykiwany jest nowy HTML, zaznacz elementy i dołącz procedury obsługi zdarzeń po umieszczeniu nowego kodu HTML na stronie.

Ale nie jestem do końca pewien, jak to zrobić. Czy istnieje sposób na "przeładowanie" programu obsługi zdarzeń?

Więc gdybym miał

$(document).ready(function(){ 
    $('.test').on('click', function(){ 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 
generatePage(); 
}); 

gdzie generatePage() tworzy kilka div z .test, jak bym ponownie powiązać .on()?

Jestem świadomy, że zadawano podobne pytania, ale nie znalazłem tego, czego szukałem po szybkim wyszukiwaniu.

Answer 1

Użyj znaku .on jak w poniższym przykładzie. Można założyć, że body-tag jest zawsze dostępny, więc można bezpiecznie dołączyć procedurę obsługi zdarzenia do treści i przekazać zdarzenia do selektora, w tym przypadku: .test.

$(document).ready(function(){ 
    $('body').on('click', '.test', function(){ // Make your changes here 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 

    generatePage(); 
}); 

Lub jeśli generatePage() jest również generowanie kodu HTML, głowy i ciała tagi używać dokument jako selektor.

$(document).ready(function(){ 
    $(document).on('click', '.test', function(){ // Make your changes here 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 

    generatePage(); 
}); 

Według jquery documentation .ON przyjmuje następujące parametry:

.on(events [, selector] [, data], handler(eventObject)) 

W TYM selektor jest opisany w następujący sposób:

Kiedy przełącznik jest procedura obsługi zdarzeń jest określony jako delegowany. Program obsługi nie jest wywoływany, gdy zdarzenie występuje bezpośrednio na związany element, ale tylko dla potomków (elementy wewnętrzne), że pasuje do selektora. jQuery propaguje zdarzenie od celu zdarzenia w górę o do elementu, do którego dołączony jest przewodnik (tj. najgłębiej do najbardziej zewnętrznego elementu) i uruchamia procedurę obsługi dla wszystkich elementów wzdłuż tej ścieżki pasujących do selektora.