javascript - 从包含 angular.js 的 html 文件中调用函数

Question

我有一个简单的index.html页面，其中包含一些带有 angular.js 的 htmls 文件

<div data-ng-include="'header.html'"></div>

使用此功能，我将标题包含在我的索引页面中，一切正常。

我现在有一个简单的警报功能：

$('#myButton').click(function(){
    alert('hello');
});

我有简单的div：

<div id="myButton">test</div>

如果我将 div 包含到我的index.html一切工作正常 - 但如果我将其包含div在header.html其中包含的 div 中angular.js，则没有反应或错误...

我认为 id 不知道 javascript 调用。
任何想法，我可以得到这个工作？我不想放弃包含...

score 2 · Accepted Answer

原因是，您是在加载文档后插入的。因此，您需要以这种方式委托和操作函数：

$('body').on('click', '#myButton', function(){
    alert('hello');
});

解释是，DOM 在文档加载后被操作。但在此之前，您要添加此事件处理程序，该事件处理程序不会被元素接收。因此，您将事件触发器委托给主体，当它发生更改时，将添加此事件。

score 0 · Accepted Answer

编辑：正如 Praveen Kuma 所说，从 jQuery 1.7+ 开始，“live”已被弃用。

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

因此，除非您使用的是旧版本的 jQuery，否则不要使用它。但是，如果您真的想要并且有充分的理由这样做，这将起作用：

使用“现场”

$('#myButton').live('click', function(){
    alert('hello');
});

即使该元素当时不存在，这也会监视您的 DOM

2 回答 2