jQuery doesn't work after content is loaded via AJAX

Question

On this page I have a jQuery popup window and thumbnail resizable images. If I mouse over on the thumbnails, the images are resizing perfectly. Also, when I click on the big

Answer 1

Your event handlers are being lost when you replace the content. When you set you hover events, jQuery is setting them on the events on the page currently. So when you replace them with ajax, the events are not associated with those elements because they are new.

To fix this you can either call the function that binds them again or you can instead set the event handler on the document as in this answer using $(document).on

That way the event is set on the document and any new elements will get the event called.