jQuery单击不在AngularJS模板中触发的事件

这可能有点奇怪，以前从来没有人遇到过这种情况，但是我发布了这个机会，有人知道我不知道。

我正在使用jQuery 2.0.3和AngularJS。

如果我在index.html有一个锚点，如下所示：

 # index.html <a href="#" class="clickme">Click Me</a> <script type="text/javascript"> $(function() { $('.clickme').click(function() { console.log("click"); }); }); </script> 

然后它工作，当我点击它，它输出“点击”。 但是当我把它放在一个包含ng-include属性的模板中时，jQuery突然不会触发。 如果我把脚本放在锚点的模板里面，它会触发。

 # index.html <div ng-include="'path/to/template.html'"></div> # template.html <a href="#" class="clickme">Click Me</a> <script type="text/javascript"> $(function() { $('.clickme').click(function() { console.log("click"); }); }); </script> 

使用使用模板的指令也是如此。 这是奇怪的，使我很多麻烦与一些下拉菜单。

有谁知道这是为什么发生？

Answer 1

由于您的clickme可能在DOM准备中不可用，而是在加载template.html时被Angular推送到DOM中 – 您需要使用jQuery的事件代理而不是使用.click ：

 $(document).on("click", ".clickme", function() { console.log("click"); }); 

这将确保jQuery绑定到文档上，然后使用clickme类监视元素上的任何点击事件。