Question

I have some weird problems with jQuery ajax. I am calling jQuery ajax function by .hover event and it is working fine.I am getting some response and I am displaying that response in div.

But if I want to call jQuery on <a> which has come as response from previous jQuery ajax call by .click event, I can not call it.

Can anyone help me out in this?

This is jQuery ajax function ..

function call_jqry_ajx(file_name,show_div_id,function_name,parameter){
    $.ajax({
        type: "POST",
        url: file_name,
        data: parameter,
        success: function(msg){
            alert( "Data Saved: " + msg ); //Anything you want
            $("#show_div").html(msg);
            alert("Done with div..");
        }
    });
}

   $(document).ready(function () 
   {
    $(".a_class").click(function(){
        alert("double times called but still getting alert.. :)");
        return false;
    });
});

in my div I get response like this ..

<div id="show_div">
      <a class="a_class" id="a_id">Call Anchor</a>
</div>

I can not execute my jQuery function a tag’s link

Answer 1

You are registering for the click event before the object is actually present in the page. Thus, it doesn’t get an event handler assigned to it.

To remedy that, you should use either .delegate() (for pre-jQuery 1.7) or .on() (for jQuery 1.7+) to use delegated event handling. This registers for the event on a parent object of the actual content that will generated the event. You pick a parent object that is there at the beginning when you register the event and then event bubbling allows events in newly created objects to be captured.

You can change your code to this:

$(document).ready(function () {
    $('#show_div').on('click', '.a_class', function(){
        alert("double times called but still getting alert.. :)");
        return false;
    });
});

This registers for the click event on the #show_div object, but only triggers the event handler if the event originated on an object that matches the .a_class selector. Thus objects inside of #show_div can come and go and the event handler will stay in place.

See the jQuery doc for more info on .on(). This replaces .live() which is now deprecated, but used to be the preferred way of doing this.