jQuery单击事件未在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>

然后它工作,当我点击它,它输出'点击'.但是当我把它放在我用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类的元素上的任何单击事件.