javascript - 从 angularjs include html 文件调用函数

Question

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

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

使用此函数，我将标题包含到索引页中，一切正常。

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

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

我有简单的div:

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

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

我认为 javascript 调用不知道该 id。
任何想法，我能让这个工作吗？我不想放弃其中的内容......

Answer 1

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

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

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