40

这可能是一个奇怪的案例，以前没有人经历过这种情况，但我发布这个是因为有人知道我不知道的事情。

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

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

有谁知道为什么会这样？

4

1 回答 1

101

由于您clickme可能在 DOM 就绪时不可用 - 而是在加载时由 Angular 推送到 DOM 中template.html- 您需要使用 jQuery 的事件委托而不是使用.click：

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

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

于 2013-09-18T15:37:46.580 回答