jQuery 单击事件未在 AngularJS 模板内触发

Question

这可能有点奇怪，以前没有人经历过这种情况，但我发布此内容是为了防止有人知道我不知道的事情。

我正在使用 jQuery 2.0.3 和 AngularJS。

如果我在 index.html 中有一个 anchor ，如下所示:

# index.html
<a href="#" class="clickme">Click Me</a>

<script type="text/javascript">
$(function() {
    $('.clickme').click(function() { console.log("click"); });
});
</script>

然后它就起作用了，当我单击它时，它会输出“单击”。但是，当我将其放入包含 ng-include 属性的模板中时，jQuery 突然不会触发。如果我将脚本放置在带有 anchor 的模板内，它就会触发。

# 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>

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

有谁知道为什么会这样吗？

Answer 1

由于您的 clickme 可能无法在 DOM 上使用 - 相反，它在加载 template.html 时由 Angular 插入 DOM - 您需要使用 jQuery事件委托(delegate)而不是使用 .click:

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

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