Question

I have a several divs that a refreshed using Ajax after the user clicks on a link on the page.

Here’s my code for the Ajax refresh div:

<script type="text/javascript"><!-- AJAX CALL FOR MY PICTURES -->
$(document).ready(function() {
$('#pictures_wrapper a.delete_image').live('click', function(e){
     $('#pictures_wrapper').load( $(this).attr('href') + ' #pictures_wrapper' );     
     e.preventDefault(); 
}); 
});
</script>

On this same page, I am loading this Jquery effect:

<script type="text/javascript"><!-- HOVER OVER ITEMS CHANGE BG COLOR -->
$(document).ready(function() {
$(".item_control_box").hide();
    jQuery('.each_item_container').hover(function() {
        jQuery(this).find('.item_control_box').show()
    }, function() {
        jQuery(this).find('.item_control_box').hide();
    });
});
</script>

My issue is that when the user click on the link to refresh the Divs, this jquery effect breaks and no longer works. I’m thinking that I have to “reload” this function some how since only the div is being reloaded and not the whole page. How can I keep this Jquery function working after refreshing a div?

Answer 1

You should use the callback function of the load, means u recall the jquery after loading has completed.

$('#pictures_wrapper').load( $(this).attr('href') + ' #pictures_wrapper', , function () { //hover effect function } );

Hope this help 🙂