Jquery function not loading after refreshing div using Ajax

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?

seems like you have to use live on hover event too.

Guillaume Cisco
– Guillaume Cisco

2011-11-08 23:15:49 +00:00
Commented Nov 8, 2011 at 23:15 — Guillaume Cisco
– Guillaume Cisco, Commented Nov 8, 2011 at 23:15

shennyL · Accepted Answer · 2011-11-08 23:16:31Z

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

answered Nov 8, 2011 at 23:16

shennyL

2,80411 gold badges43 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shennyL Over a year ago

hi, please refer to api.jquery.com/load The code here i just showing as your reference, I dint check for the syntax, but I solve similar situation by that :)

Jasper · Accepted Answer · 2011-11-08 23:37:04Z

1

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/

answered Nov 8, 2011 at 23:37

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

1 Comment

DobotJr Over a year ago

I think this is the route I need to take, but when I updated my code, and I hover over the div, it doesn't show .item_control_box

sazedul · Accepted Answer · 2014-08-01 15:40:02Z

1

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

answered Aug 1, 2014 at 15:40

community wiki

sazedul

Comments

Rafay · Accepted Answer · 2011-11-08 23:21:20Z

0

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();
}
});

answered Nov 8, 2011 at 23:21

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Collectives™ on Stack Overflow

Jquery function not loading after refreshing div using Ajax

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related