dynamically add listener to ajax created content in jQuery

Question

I am trying to get the html value of a linked clicked. The links are created dynamically with Ajax so I don\'t think .bind will work and I don\'t have latest version with

Answer 1

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

If it's 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 2

You have 2 options -

1. Use the LiveQuery plugin which is what we used before .live came along
2. Rebind your function to the click event after each successful ajax call. (Recommended)

Answer 3

Here's an alternate approach that has not been mentioned:

If you're using jQuery v1.7+ you can use the .on() method to bind an event listener to current HTML as well as HTML that is added in the future:

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

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

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

In summary:

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

Answer 4

Apply your handler to just the links, in the callback of the AJAX load.

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

Answer 5

Maybe a late and duplicate answer but This may be a 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 dont need to reinitiate event listeners at all or write anything in ajax function.

Answer 6

Other solution is to make a function for click reinitialization, because you may have other situation, like i had :), so logic may be following:

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

on ajax success run initsomething() :)