How to associate events with loaded Ajax content?

Question

I have a link, myLink , which should embed the content loaded by AJAX in the div (appendedContainer) of my HTML page. The problem is that the click event that I linked to jQuery does not fire on newly loaded content that is inserted into appendedContainer. The click event is associated with DOM elements that do not load with my AJAX function.

What do I need to change for the event to be connected?

My HTML:

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

My 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!");}); 

Downloadable Content:

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

Answer 1

Using event delegation for dynamically generated elements:

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

This really works, here is an example where I added an anchor with the .mylink class instead of data - http://jsfiddle.net/EFjzG/

Answer 2

If you add content after calling the .on () function, you need to create a delegated event in the parent of the loaded content. This is because event handlers are bound when .on () is called (i.e., usually when the page loads). If the element does not exist when the .on () method is called, the event will not be bound to it!

Since events are propagated through the DOM, we can solve this by creating a delegated event in the parent element ( .parent-element in the example below), which, as we know, exists when the page loads. Here's how:

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

More detailed information on the topic:

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

Answer 3

if your question is: "How to associate events with ajax content uploaded", you can do the following:

 $("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'); }); 

so you don’t need to place a configuration for each of your ajax code

Answer 4

As with jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

Example -

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

Answer 5

use jQuery.live (). Documentation here

eg

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

Answer 6

For ASP.NET, try the following:

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

This is similar to working with page loading and loading the update panel

Please find a full discussion here .

Answer 7

For those who are still looking for a solution, the best way to do this is to associate the event with the document itself and not associate it with the "on ready" event For example, for example:

 $(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 } }); }); 

});