.on ("kliknięcie", funkcja() nie działa, gdy odsyłacz renderowany jest z ajaxem

Question

Poniższy link pokazuje modalny i uruchamia żądanie ajaxowe, aby wyrenderować częściowe w modalu na podstawie identyfikatora obiektu. modal pojawia się, gdy strona jest w pełni załadowana przez żądanie http, ale jeśli wyrenderuję link z zapytaniem ajaxowym (np. inny modalny wyskakuje i renderuje kilka linków) to funkcja js nie działa. alert();. po prostu sprawdzić i robi go uruchomić, gdy jego wytopione z ajax

używam jQuery 1.9.1, wcześniej pracował z .live js („kliknięcie”), ale od tego czasu został usunięty Próbowałem również .click()

Wszelkie pomysły? Dziękujemy!

link

<a href="/an-object-id" data-remote=true name="modal">  

JS

$(document).ready(function() { 
$("a[name=modal]").on("click", function(e) { 
    $("#mask, #modal").show(); 
    e.preventDefault(); 
etc... 

Answer 1

Dołączanie programu obsługi zdarzeń do rodzica element przy użyciu .on() i przekazuj selektor jako argument.

Przykład:

$(document).on("click", "a[name=modal]", function(e) {...}); 

który działa na dynamicznie generowanych elementów, jak dobrze ..

Answer 2

$(document).on("click", "a[name=modal]", function(e) { 
    $("#mask, #modal").show(); 
    e.preventDefault(); 
etc... 

Answer 3

wykorzystanie na razie delegation..since linku jest generowana dynamicznie ... kliknij zdarzenie nie zostanie zwolniony ... używania dokumentu aby przekazać wydarzenie ..

$(document).on("click","a[name='modal']", function(e) { 
     .. 
}); 

yo u może przejść przez link aby przeczytać więcej o on wydarzeń delegowanych .. to będzie dużo lepiej, jeśli powierzyć wydarzenie najbliższego elementu, który jest obecny w dokumencie niż document dla lepszej wydajności

Answer 4

Zasadniczo trzeba wiązać słuchacza do zdarzenia click coś w DOM że nie zostanie zmieniony . on() ma opcjonalny parametr, który umożliwia filtrowanie wyzwalaczy zdarzeń do elementu podrzędnego elementu wybranego jako odbiornik. Najprostszym jest użycie document, ale wolę używać najbliższego rodzica, o którym wiem, że się nie zmienię. Zakładając więc, miałem ten znaczników:

<div id="super-awesome-parent"> 
    <ul> 
     <li><a href="#">Some link text</a></li> 
     <li><a href="#">Some link text</a></li> 
     <li><a href="#">Some link text</a></li> 
     <li><a href="#">Some link text</a></li> 
     <li><a href="#">Some link text</a></li> 
    </ul> 
</div> 

mógłbym napisać on() delegata tak:

$('#super-awesome-parent').on('click', 'a', function(event){ 
    // ... code 
}); 

Następnie wszelkie <a> elementy, które są dodawane do #super-awesome-parent po zdarzeniu ready() nadal będą obsługiwane przez delegata.