Question

我有几个div在用户点击页面上的链接后使用Ajax刷新。

这是我的Ajax刷新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>

在同一页面上，我正在加载此Jquery效果：

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

我的问题是，当用户点击链接刷新Div时，此jquery效果会中断并且不再有效。我想我必须“重新加载”这个函数，因为只有div被重新加载而不是整个页面。如何在刷新div后保持此Jquery功能正常工作？

Answer 1

你应该使用加载的回调函数，意味着你在加载完成后调用jquery。

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

希望这有帮助：）

Answer 2

如果您将.bind()来电更改为.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()与使用.bind('mouseover', function () {...})和.bind('mouseout', function () {...})

相同

如果要将事件处理程序绑定到DOM中尚未包含的元素，可以使用.live()或.delegate()：http://api.jquery.com/live/，http://api.jquery.com/delegate/

为与当前匹配的所有元素附加事件处理程序选择器，现在和将来。

从jQuery 1.7开始，您应该使用.on()作为.bind()，.live()，.delegate()已弃用：http://api.jquery.com/on/

Answer 3

最好将代码放在名为

的自定义函数中

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

}

然后将该函数放入你的ajax成功函数

 $.ajax({
            url: 'your_php_file.php',
            type: 'POST',
            data:formData,
            success: function(response)
            {

                $("#formbox").html(response);

                  effectLoad();

            }

        });

希望它能奏效。

由于

Answer 4

作为@Guillaume思科在评论中提到你必须将悬停效果重新绑定到DOM中的动态插入元素，你可以这样做

$(".item_control_box").live(
{
mouseenter:function(){
jQuery(this).find('.item_control_box').show();
},
mouseleave:function(){
jQuery(this).find('.item_control_box').hide();
}
});

使用Ajax刷新div后没有加载Jquery函数

4 个答案: