一尘不染

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

angularjs

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

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

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

有人知道为什么会这样吗?


阅读 237

收藏
2020-07-04

共1个答案

一尘不染

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

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

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

2020-07-04