从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包含在由angular.js包含的header.html ，则没有反应或错误...

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

Answer 1

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

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

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

Answer 2

编辑：正如Praveen Kuma所说，'live'在jQuery 1.7+之后已被弃用。

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

所以除非你使用旧版本的jQuery，否则不要使用它。 但是，如果你真的想并且有充分的理由，这将有效：

用'直播'

http://api.jquery.com/live/

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

即使元素当时不存在，这也将继续监视您的DOM