Question

Not sure if this is a bug or I am not suppose be doing this.

I have a page with sidebars that loads the main body dynamically.

For page1, I have a callback for an element #id1, which works on initial load.

After the user navigates to page2, the main content will get replaced by contents of page2, which also has an element with #id1, they serve the same purpose. events are initialized there as well.

The problem is that everything on page 2 would work except the event associated with #id1.

If navigating back to page 1, #id1 wouldn’t work as well.

After looking at the console, I found that when calling $("#id1") sometimes give me the initial load element (not destroyed?), which is probably the reason.

The ajax load simply uses:

$.get(path, function(data) {$('#main').html(data)});

Any idea what’s going on here?

If the old elements are not ‘properly destroyed in jquery’, what is suppose to be done here.

Answer 1

While it’s not clear exactly what you’re binding, the solution is to use (depending on your jQuery version) live() or on() to ensure that you bind to elements that aren’t in the DOM at execution time.

jQuery 1.7+: on()

$(document).on('click', '.selector', function() { ... });

jQuery <1.7: live()

$('.selector').live('click', function() { ... });