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中，angular.js包含{{1}}则没有反应或错误......

我认为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，否则不要使用它。但是，如果你真的想要并且有充分的理由，那就可以了：

使用'live'

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

即使该元素当时不存在，这也将继续关注您的DOM