jQuery点击事件在AngularJS模板中不会触发

Question

jQuery点击事件在AngularJS模板中不会触发

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>

然后它可以正常工作，当我点击它时，它会输出“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>

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

有人知道为什么会发生这种情况吗？

（Translated text:）

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

有人知道为什么会发生这种情况吗？

- Adam K Dean

1

可能与DOM在绑定时未准备好有关，但是你应该将所有的DOM操作放入指令中！！！ - tymeJV

你能在JSFiddle/Plunker上放置代码吗？ - Nitish Kumar

这只是一个简化的情况，实际上它是一个 JavaScript 文件，在 index.html 中被调用，旨在处理导航菜单。 - Adam K Dean

有任何Angular控制器吗？ - Nitish Kumar

2

你真的应该为此使用一个指令。 - Zack Argyle

1

我刚刚简化了我的示例。它是一个未触发JS事件的指令。 - Adam K Dean

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CodingIntrigue · Accepted Answer

由于你的clickme在DOM准备好时可能并不可用 - 而是在Angular加载template.html时将其推入DOM中 - 因此，你需要使用jQuery的事件委托而不是使用.click：

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

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