Question

I am trying to use ajax like below;

jquery code:

$("a.generate").click(function(){
    $.ajax({
        data: {tag: $(this).html()},
        success: function(data){
            $("#terms div.content").html(data);
        }
    });
});

the link I call from:

<a href="#" class="generate"> tag </a>

after call, ajax loads the links that I can call again like below:

<a href="#" class="generate"> term </a>
<a href="#" class="generate"> term2 </a>

The problem is, if I click the links from ajax loaded data, ajax doesn’t load anymore.

edit:

After I edited the code with the on() method like below, the code does nothing:

$("body").on('click', 'a.generate', function(){
    $.ajax({
        data: {tag: $(this).html()},
        success: function(data){
            $("#terms div.content").html(data);
        }
    });
});

solved:

the jquery version, I have added in head tags were 1.6.2, I have updated the version, no problem now. thanks again.

Answer 1

Use on to add your event handlers.

$(document).on("click", "a", function(){
});

This will wire up every single anchor that’s ever clicked. To be more selective, just pass in a selector for the second parameter

$(document).on("click", "a.someClass", function(){
});

Note that live—a common suggestion for events in jQuery—is deprecated; on is the preferred way to add events that will also work with dynamically added content.

Also, since on was added in jQuery 1.7, if you’re using an older version, you’ll have to use delegate. Note that the order of the selecter and event are reversed:

$(document).delegate("a.someClass", "click", function(){
});

Here are the docs for on()