Question

My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:

$("#left_part").click(function() {  // ajax call here });

Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.

say:

$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine

Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.

But what I know is: $().click(function) calls $().bind('click',function)

So, What is the reason behind this? Or What is the perfect way to solve such problem

Thanks

Answer 1

When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup – the new elements are not bound to the click event because they did not exist when you first called $().click.

There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:

$('#elements').live('click', function() {
   // do logic
});