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

我有一个链接myLink ,它应该将加载了AJAX的内容插入到我的HTML页面的divmyLink )中。 问题是,我已经绑定了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> 

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

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

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

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

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

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

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

如果你的问题是“如何绑定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代码中

使用jQuery.live()来代替。 文档在这里

例如

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

对于ASP.NET试试这个:

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

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

请在这里find完整的讨论。

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

示例 –

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

对于那些仍在寻找解决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 } }); }); 

});