jquery not working after ajax-jv page refresh ?

[iosman]

Hello,

I myself am new to this business, so the question is about the following situation:

- there is a script on the page that decorates the page:
1
$('.firm_card_container').hover(function(){
2
$(this).children().not('.r_gl_3').css('background-color','#FFE9CC');
3
}, function(){
4
$(this).children().not('.r_gl_3').css('background-color','#EFF9F8');
5
})


when the page loads - the script runs on the content. when content is updated by ajax script - above mentioned script is not working. the site is written on a framework and it is impossible to add code to the framework by adding code to update the above script. Someone tell you what to do.


thanks
jackyjoy

[Nexus]

Your script stops working after content updating 'cause «updating» replaces old content with your listeners with new one without them.
You can solve that problem by delegating the listeners to the closest parent which won't be changed by ajax or you can just listen document events.

Example of code:

$(function () {
    $(document).on('mouseenter', '.firm_card_container > :not(.r_gl_3)', function () {
        $(this).css('background-color', '#FFE9CC');
    }).on('mouseleave', '.firm_card_container > :not(.r_gl_3)', function () {
        $(this).css('background-color', '#EFF9F8');
    });
});