这可能是一个奇怪的情况下,没有人曾经经历过这一点,但我发布这一点的机会,有人知道的东西,我不。
我使用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类的元素上的任何点击事件。