.on ("clic", funzione() non funziona quando il collegamento è stato eseguito con ajax

Question

Il collegamento seguente mostra una modale ed esegue una richiesta Ajax per eseguire il rendering di un partial all'interno del modal in base all'id dell'oggetto. appare modale quando la pagina è completamente caricata con una richiesta http, ma se rendo il link con una richiesta Ajax (ad esempio una diversa modal si apre e rende alcuni dei link) la funzione js non viene eseguita. un avviso(); solo per controllare e non viene eseguito quando viene eseguito il rendering con ajax.

Sto usando JQuery 1.9.1, in precedenza js funzionava con .live ('clic'), ma da allora è stato rimosso Ho anche provato .click()

Qualche idea? Grazie!

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

Collegare un gestore di eventi per un genitore elemento utilizzando .on() e passa il selettore come argomento.

Esempio:

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

che lavora per gli elementi generati dinamicamente come pure ..

Answer 2

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

Answer 3

uso sul caso delegation..since tuo link è generato dinamicamente ... cliccate evento non sarà licenziato ... l'uso del documento delegare l'evento ..

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

yo u può passare attraverso il link per leggere di più su on eventi delegati .. sarà molto meglio se si delega l'evento con l'elemento più vicino che è presente nel documento di document per migliorare le prestazioni

Answer 4

In sostanza, è necessario associare il listener per l'evento click per qualcosa nel DOM che non viene alterata . on() ha un parametro facoltativo che consente di filtrare i trigger di eventi su un elemento figlio dell'elemento selezionato come listener. Il più semplice è usare document, ma preferisco usare il genitore più vicino che so che non cambierò. Quindi, supponendo che ho avuto questa marcatura:

<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> 

Potrei scrivere un delegato on() in questo modo:

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

Quindi, qualsiasi <a> elementi che vengono aggiunti al #super-awesome-parent dopo l'evento ready() saranno ancora gestiti da il delegato.