Meteor mit jquery Ereignisse läuft nur einmal

Question

Ich benutze Meteor 1.3 und ich musste eine "Web-Vorlage" in meine Meteor-Anwendung zu integrieren, diese "Web-Vorlage" hat eine custom.js-Datei, die j Abfrage Ereignisse enthält, aber nach der Integration der "Web-Vorlage", diese Ereignisse innerhalb JS-Datei läuft nur einmal, gibt es eine Möglichkeit, dies zu beheben, diese Js-Datei enthält eine Menge von Zeilen und es wäre sehr kompliziert, Ereignisse in meine "Meteor-Vorlagen Ereignisse" zu verschieben. Danke

Answer 1

Das Problem ist, dass die Ereignisse direkt auf DOM-Elemente in Ihrer Vorlage liegen, und wenn Meteor die DOM-Elemente ändert, ist die Bindung verloren.

Was Sie tun müssen, ist delegierte Ereignisse zu verwenden, die mit jquery .on() durchgeführt wird.

Was Sie zu tun haben, ist die Ereignisse in einem festen DOM-Element zu behandeln, Ihr Elternteil "changing HTML". Wenn ein Ereignis innerhalb dieses Elements passiert, "sprudelt" das Ereignis bis zum festen DOM-Element, das es behandelt. Das Ereignis enthält Informationen über das DOM-Element, das es gestartet hat, sodass das On-Abonnement den richtigen Handler aufrufen kann.

Beachten Sie, dass $('#fixedElement').on(event, selector, handler) gibt an:

• das feste Element, das die sprudelte Events „fangen“
• das Ereignis, das Sie
• einen Wähler zu handhaben wollen, die die untergeordneten Elemente des feststehenden Elements filtert
• der Handler

So auszuführen, können Sie festlegen, welches Ereignis auf welchem ​​Element mit welchem ​​Handler umgehen. Und das wird funktionieren, nachdem der Meteor das DOM modifiziert hat.

Zum Beispiel, wenn Sie diese:

$('#btnOk').click(function() { alert('Clicked OK!`); }); 

Sie haben es in das zu ändern:

$('#container').on('click', '#btnOk', function() { alert('Clicked OK!`); }); 

, so dass, wann immer ein DOM-Element mit der ID '#btnOk', das ist Innerhalb von '#cotnainer' wird der Handler ausgeführt, unabhängig davon, ob das Objekt vor der Übergabe existiert oder gerade erstellt wird.

Natürlich müssen Sie sicherstellen, dass das -Element existiert, und es wird nicht durch andere Dinge ersetzt. Um dies zu tun, müssen Sie vielleicht den DOM-Baum durchqueren, zum Beispiel mit jQuery .parent().