Jquery function not loading after refreshing div using Ajax - php

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 :)

Answer 2

Your code should work if you change your .bind() calls to .live():
jQuery('.each_item_container').live('mouseenter', function() {
jQuery(this).find('.item_control_box').show()
}).live('mouseleave', function() {
jQuery(this).find('.item_control_box').hide();
});
.hover() is the same thing as using .bind('mouseover', function () {...}) and .bind('mouseout', function () {...})
When you want to bind event handlers to elements not yet in the DOM you can use .live() or .delegate(): http://api.jquery.com/live/, http://api.jquery.com/delegate/
Attach an event handler for all elements which match the current
selector, now and in the future.
As of jQuery 1.7 you should be using .on() as .bind(), .live(), and .delegate() are depreciated: http://api.jquery.com/on/

Answer 3

Better put the code in a custom function with a name
function effectLoad(){
$(".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();
});
}
then put the function in your ajax success function
$.ajax({
url: 'your_php_file.php',
type: 'POST',
data:formData,
success: function(response)
{
$("#formbox").html(response);
effectLoad();
}
});
Hope it will work.
Thanks

Answer 4

as #Guillaume Cisco mentioned in the comments you have to rebind the hover effect to dynamically inserted elements in the DOM, you can do it like
$(".item_control_box").live(
{
mouseenter:function(){
jQuery(this).find('.item_control_box').show();
},
mouseleave:function(){
jQuery(this).find('.item_control_box').hide();
}
});