CODEWITHSUNDEEP
ajaxjquery
sohaan
sohaan

Reputation: 647

how to access the id of div which is loaded through ajax

I have button with id = new which loads the new page

$("#new").click(function(){
$('#message_area').load('new.php');
});

There is a button in new.php which sends message to database. But i have a problem with it , it only works for first time when page loads if i navigate to some other links via ajax and again load new.php using above code then send button in new.php does not work i have to refresh the page then it works. I think its because the send button in new.php is added after DOM is created for first time . Please help Thanks in advance ..

Upvotes: 0

Views: 127

Answers (4)

Surreal Dreams
Surreal Dreams

Reputation: 26380

To manage dynamically created elements like this, you need to use .on() (jQuery 1.7 and above) or .delegate() (jQuery 1.4.3 and above) to assign the events. Seems everyone has beaten me to the code, but I'll post this for the links to the functions.

Upvotes: 0

ek_ny
ek_ny

Reputation: 10233

$("#new").live("click", function(){
$('#message_area').load('new.php');
});

just realized this was deprecated-- should be using on instead.. my bad.

Upvotes: 0

James Allardice
James Allardice

Reputation: 165941

You will need to post more details of your markup for a more accurate answer, but the general idea is to use event delegation. Bind the event handler to an ancestor of the button that does not get removed from the DOM. For example:

$("#message_area").on("click", "#yourButton", function() {
    //Do stuff
});

This works because DOM events bubble up the tree, through all of an elements ancestors. Here you are simply capturing the event higher up the tree and checking if it originated from something you are interested in (#yourButton).

See jQuery .on for more. Note that if you're using a version of jQuery below 1.7, you will need to use delegate instead.

Upvotes: 3

Dutchie432
Dutchie432

Reputation: 29160

//jquery >= v1.7
$("body").on('click', '#new', function(){
    $('#message_area').load('new.php');
});

//jquery < v1.7
$("#new").live('click',function(){
    $('#message_area').load('new.php');
});

Upvotes: 1

Related Questions