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

前端之家收集整理的这篇文章主要介绍了jQuery点击事件不会触发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>

然后它工作,当我点击它,它输出“点击”。但是当我把它放在一个模板,我包括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>

使用模板的指令也是如此。这是奇怪的,使我有一些下拉菜单很多麻烦。

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

解决方法

由于你的clickme可能不适用于DOM准备好了 – 而是当它加载template.html时被Angular推送到DOM – 你需要使用jQuery的事件委托,而不是使用.click:
$(document).on("click",".clickme",function() {
  console.log("click");
});

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

猜你在找的jQuery相关文章