Dynamically add listener to generated ajax content in jQuery

Question

I am trying to get the html value of a linked click. Links are created dynamically using Ajax, so I don’t think .bind will work, and I don’t have the latest version with .live

$('div#message').click(function() { var valueSelected = $(this).html(); // picks up the whole id. I juust want single href! alert(valueSelected); return false; }); <div id="message"> <br/> <a class="doYouMean" href="#">location A</a> <br/> <a class="doYouMean" href="#">location B</a> <br/> <a class="doYouMean" href="#">location C</a> <br/> <a class="doYouMean" href="#">location D</a> <br/> <a class="doYouMean" href="#">location E</a> <br/> </div> 

Answer 1

Apply the handler only to the links in the AJAX load callback.

 $('div#message').load( myUrl, function() { $('div#message a').click(function() { var valueSelected = $(this).html(); alert(valueSelected); return false; }); }); 

Answer 2

Here's an alternative approach that was not mentioned:

If you are using jQuery v1.7 + , you can use the .on() method to bind the event listener to the current HTML, as well as HTML added in the future:

 $('#message a').on('click', function(){ alert('link clicked!'); }); 

If you are using an older version of jQuery, it is recommended that you use .delegate() :

 $('#message').delegate('a', 'click', function(){ alert('link clicked!'); }); 

In short:

 $(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(elements).on(events, selector, data, handler); // jQuery 1.7+ 

Answer 3

You have 2 options -

• Use the LiveQuery plugin that we used before .live appeared
• Detach your function from the click event after each successful ajax call. (Recommended)

Answer 4

You really should use the latest version if you can help it.

If these are the ".doYouMean" elements that are added using AJAX, and #message is always there, try:

 $('#message').bind('click', function (event) { var target = event.currentTarget; if ($('.doYouMean').filter(target)) { // target is the .doYouMean that was clicked: Handle here }; }); 

(This works: http://www.jsfiddle.net/SuVzv/ )

Answer 5

Another solution is to make a function to reinitialize clicks, because you may have a different situation, for example, I have :), so the logic may be as follows:

 $(document).ready(function() { initsomething(); }); function initsomething(){ ....... $('div#message').click(function() { var valueSelected = $(this).html(); // picks up the whole id. I juust want single href! alert(valueSelected); return false; }); ....... } 

in ajax success run initsomething () :)

Answer 6

Maybe a late and repetitive answer, but it may be late, but this is what I do when I need ajax.

 $(document).ready(function () { $(document.body).on('click', '.Selector_S', function () { function_F(event, this) }) } function function_F(event, d){ ...do sth here... } 

And you don't need to re-run event listeners at all or write anything in the ajax function.