Aurelia + Webpack mit einem gemeinsamen JQuery-Skript

Question

Ich habe eine Aurelia-App, die von Webpack gebündelt wird. Wir haben eine separate Legacy-js-Datei, die einige Klickbindungen auf Schaltflächen hat, die ich gerne einfügen würde. Denn jetzt können wir die separate Datei sagen wie unten aussieht:

    (function (window, $) { 

     $(function() { 
     console.log($('.btn'); //this always shows length 0!! 
     $('.btn').on('click', function (event) { 
      event.preventDefault(); 
      console.log("button was clicked"); 
     }); 
     }); 

    })(window, jQuery); 

 

ich die Datei über webpack importiert bekommen können, aber die jquery Klick Zuhörer scheinen nicht zu funktionieren. Gibt es eine einfache Möglichkeit, dies auf globaler Ebene zu erreichen, sodass alle in der App verwendeten Schaltflächen diese Klickereignisse abhören können? Auch wenn ich console.log $ ('. Btn') habe, hat es immer eine Länge von 0, obwohl es .btn Klassen auf der Seite gibt.

Answer 1

Wahrscheinlich wird Ihre Funktion aufgerufen, bevor die Elemente an die Seite angehängt wurden. Sie fügen also Listenern Objekte hinzu, die noch nicht existieren.

kann ich 2 Möglichkeiten sehen, Ihr Problem zu lösen, ohne viel Code zu ändern:

1 Ihre Funktion in der attached() Haken jedes individuell Element Rufen. nicht eine schöne Sache

2 Verwenden Ereignis Delegation zu tun, wenn Sie Ihre Skript:

(function(window, $) { 
    $('body').on('click', '.btn', function(event) { 
    event.preventDefault(); 
    console.log("button was clicked"); 
    }); 
})(window, jQuery); 

hoffe, das hilft!