jQuery click事件未在AngularJS模板中触发

Question

这可能是一个奇怪的情况，以前没有人曾经历过，但是我是偶然地发布此消息，因为有人知道我不知道的东西。

我正在使用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>

然后它起作用了，当我单击它时，它输出“ click”。但是，当我将其放入包含该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上使用-
而是在加载时由Angular将其推送到DOM中template.html-您需要使用jQuery的事件委托而不是使用.click：

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

这将确保jQuery绑定到文档上，然后监视具有clickme该类的元素上的任何click事件。