CODEWITHSUNDEEP
jquery
Chinmoy
Chinmoy

Reputation: 11

jquery, ajax content is not clickable

jQuery(".location a").click(function()
        {
            var data="type=loc&data="+jQuery(this).attr('name');
            jQuery.ajax({
                   type: "POST",
                   url: "<?php echo home_url( '/' );?>wp-content/plugins/manageTeam/ajax.php",
                   data: data,
                   beforeSend: function(  ) {
                        jQuery(".teammemcont").hide();

                      },
                   success: function(msg){
                            jQuery(".teammemcont").html(msg);   
                            jQuery(".teammemcont").show();                                   
                    }
                }); 

        });

here the content returned by ajax is loaded into teammemcont container.now if i want to click a class of the loaded content by ajax,then it is not working.that means click event is not working on ajax returned content.

Upvotes: 0

Views: 951

Answers (5)

Dau
Dau

Reputation: 8858

you should use the live method of jquery to bind events to dynamic element. in your case you should use

$("class selector").live('click',function(){
//do stuff
});

Upvotes: 0

Thomas Clayson
Thomas Clayson

Reputation: 29935

Click events only work on elements on the page at the time of binding the event listener.

If you want your click event to work on elements created (e.g. in your case via ajax) AFTER the page has loaded then you need to use one of the many delegate functions.

If you're using 1.7 or above then use on() if you're using an earlier version then use delegate().

on()

delegate()

Upvotes: 0

Didier Ghys
Didier Ghys

Reputation: 30676

You have to use event delegation for the appended elements to be taken into account. When simply using .click(), the elements you load with ajax are not in the DOM yet so nothing is binded to them.

Use .on() (or .delegate()):

$('.teammemcont').on('click', '.location a', function(e) {
    ...
});

Basically, you delegate the handling of the click event on '.location a' elements to a parent that exists in the DOM (you could even go up to the document element).
This way, added '.location a' elements within this container will be taken into account automatically.

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

The click() function only binds the event handler to elements that exist when its run, so any dynamically added content won't be affected. In order to do that, you'll need to use a method to add the event handler to dynamically generated content, namely on() (jQuery 1.7+) or delegate() (prior to jQuery 1.7). live() is deprecated, and shouldn't be used.

Upvotes: 0

James Allardice
James Allardice

Reputation: 166071

This is because the elements in question do not exist in the DOM at the time the event is bound. You need to bind the event with the on method (if you're using jQuery 1.7+) or delegate (if you're using an older version):

//jQuery 1.7+
$(".teammemcont").on("click", ".someClass", function() {
    //Newly added element clicked!
});

//Older versions...
$(".teammemcont").delegate(".someClass", "click", function() {
    //Newly added element clicked!
});

Upvotes: 1

Related Questions