如何在Ajax加载的内容上绑定事件？

我有一个链接myLink ，它应该将加载了AJAX的内容插入到我的HTML页面的div （ myLink ）中。 问题是，我已经绑定了jQuery的click事件没有被执行在新加载的内容，这是插入到appendContainer。 click事件绑定在未使用我的AJAX函数加载的DOM元素上。

我必须改变什么，这样事件才会受到约束？

我的HTML：

 <a class="LoadFromAjax" href="someurl">Load Ajax</a> <div class="appendedContainer"></div> 

我的JavaScript：

 $(".LoadFromAjax").on("click", function(event) { event.preventDefault(); var url = $(this).attr("href"), appendedContainer = $(".appendedContainer"); $.ajax({ url: url, type : 'get', complete : function( qXHR, textStatus ) { if (textStatus === 'success') { var data = qXHR.responseText appendedContainer.hide(); appendedContainer.append(data); appendedContainer.fadeIn(); } } }); }); $(".mylink").on("click", function(event) { alert("new link clicked!");}); 

要加载的内容：

 <div>some content</div> <a class="mylink" href="otherurl">Link</a> 

Answer 1

使用事件委托来dynamic创build元素：

 $(document).on("click", '.mylink', function(event) { alert("new link clicked!"); }); 

这实际上工作，这里是一个例子，我附加了一个类的.mylink锚而不是data – http://jsfiddle.net/EFjzG/

Answer 2

如果在调用.on（）之后附加内容，则需要在加载的内容的父元素上创build一个委托事件。 这是因为事件处理程序在.on（）被调用（即通常在页面加载）时被绑定。 如果.on（）被调用时该元素不存在，则该事件不会被绑定到它！

因为事件通过DOM传播，所以我们可以通过在页面加载时我们知道存在的父元素（下例中是.parent-element ）创build一个委托事件来解决这个问题。 就是这样：

 $('.parent-element').on('click', '.mylink', function(){ alert ("new link clicked!"); }) 

更多关于这个问题的阅读：

• https://learn.jquery.com/events/event-delegation/
• http://jqfundamentals.com/chapter/events

Answer 3

如果你的问题是“如何绑定ajax加载的内容上的事件”，你可以这样做：

 $("img.lazy").lazyload({ effect : "fadeIn", event: "scrollstop", skip_invisible : true }).removeClass('lazy'); // lazy load to DOMNodeInserted event $(document).bind('DOMNodeInserted', function(e) { $("img.lazy").lazyload({ effect : "fadeIn", event: "scrollstop", skip_invisible : true }).removeClass('lazy'); }); 

所以你不需要把你的configuration放到你的每一个ajax代码中

Answer 4

使用jQuery.live（）来代替。 文档在这里

例如

 $("mylink").live("click", function(event) { alert("new link clicked!");}); 

Answer 5

对于ASP.NET试试这个：

 <script type="text/javascript"> Sys.Application.add_load(function() { ... }); </script> 

这似乎工作在页面加载和更新面板加载

请在这里find完整的讨论。

Answer 6

从jQuery 1.7开始， .live()方法已被弃用。 使用.on()附加事件处理程序。

示例 –

 $( document ).on( events, selector, data, handler ); 

Answer 7

对于那些仍在寻找解决scheme的人来说，最好的办法是将事件绑定在文档本身上，而不是将其与事件“就绪”绑定。例如：

 $(function ajaxform_reload() { $(document).on("submit", ".ajax_forms", function (e) { e.preventDefault(); var url = $(this).attr('action'); $.ajax({ type: 'post', url: url, data: $(this).serialize(), success: function (data) { // DO WHAT YOU WANT WITH THE RESPONSE } }); }); 

}）;