带有共享传统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); 

希望这有助于！