帶有共享傳統jQuery腳本的Aurelia + Webpack

Question

我有一個正在被webpack捆綁的aurelia應用程序。我們有一個單獨的遺留js文件，它在按鈕上有一些點擊綁定，我希望能夠放置到位。現在，我們可以說，單獨的文件看起來像如下：

    (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); 

 

我得到通過的WebPack進口的文件，但是jQuery的點擊聽衆似乎可以不上班。是否有一種簡單的方法在全球範圍內引入此應用程序，以便應用程序中使用的所有按鈕都可以監聽這些點擊事件？另外，當我console.log $（'。btn'）它總是有0的長度，即使頁面上有.btn類。

Answer 1

可能發生的事情是，您的函數在元素被附加到頁面之前被調用。因此，您將偵聽器添加到尚不存在的對象。

我可以看到2種方式來解決問題，而不改變太多的代碼：

1呼叫功能在attached()鉤每個自定義元素的。 不是一個很好的事情

2使用事件委託，改變你的腳本：

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

希望這有助於！