.on ("click", function() funktioniert nicht, wenn link mit ajax gerendert wird

Question

Der unten stehende Link zeigt ein Modal und führt eine Ajax - Anfrage aus, um eine partielle innerhalb des Modales basierend auf der Objekt - ID zu rendern modal wird angezeigt, wenn die Seite vollständig mit einer http-Anfrage geladen ist, aber wenn ich die Verbindung mit einer Ajax-Anfrage rendere (zB erscheint ein anderes Modal und gibt einige der Links wieder), dann wird die js-Funktion nicht ausgeführt eine Warnung(); nur zu überprüfen, und es läuft nicht, wenn es mit Ajax gerendert wird.

Ich benutze JQuery 1.9.1, zuvor arbeitete die js mit .Live ("klicken"), aber das wurde seitdem entfernt Ich habe auch versucht, .click()

Irgendwelche Ideen? Danke!

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

Bringen Sie einen Event-Handler zu einem Elternteil in dem Dokument als document für eine bessere Leistung vorhanden ist Element mit .on(), und übergeben Sie den Selektor als Argument.

Beispiel:

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

die auch für dynamisch generierte Elemente funktionieren ..

Answer 2

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

Answer 3

Einsatz auf Ereignis delegation..since Ihr Link dynamisch generiert ... Ereignis klicken, wird nicht gefeuert werden ... Anwendung Dokument um das Ereignis zu delegieren.

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

yo u kann die link geht durch mehr über on delegierte Ereignisse zu lesen .. es viel besser sein wird, wenn Sie das Ereignis mit engstenem Elemente delegieren, die

Answer 4

Grundsätzlich müssen Sie den Hörer für Ihr Click-Ereignis zu etwas in dem DOM binden, die nicht verändert Bekommen . on() verfügt über einen optionalen Parameter, mit dem Sie Ereignisauslöser auf ein untergeordnetes Element des als Listener ausgewählten Elements filtern können. Am einfachsten ist es, document zu verwenden, aber ich bevorzuge, das nächste Elternteil zu verwenden, von dem ich weiß, dass ich es nicht ändern werde. Also, vorausgesetzt ich diesen Auszeichnungs hatte:

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

Ich könnte einen on() Delegierten schreiben wie so:

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

Dann werden alle <a> Elemente, die #super-awesome-parent nach dem ready() Ereignis hinzugefügt werden, werden nach wie vor durch behandelt werden der Delegierte.