Why some time jquery click event fails?

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 re开发者_如何转开发loads 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

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
});