Question

我有一些从AJAX调用创建的元素。在这些元素中，有一个子元素，当悬停时需要显示另一个动态创建的子元素。当我在小提琴中运行.hover jquery时，它运行正常。当我在我的代码中实现它时，它不想工作。

我想知道它是否取决于加载.hover脚本的时间与从AJAX加载元素的时间。是否需要先走另一个？是否应该.promise制定等待AJAX元素在.hover脚本运行之前加载？

以下是我的示例的fiddle。

Answer 1

对于动态生成的元素，事件应该从元素或文档对象的静态父级之一委派，您可以使用on或delegate方法。

$(document).on({
    mouseenter: function() {
        $(this).next('.show').fadeIn(800);
    },
    mouseleave: function() {
        $(this).next('.show').delay(800).fadeOut(800);
    }
}, '.touch');

Answer 2

我理解您的问题意味着您要将事件附加到可能尚不存在的元素。您应该将其委托给永久容器元素，而不是绑定到元素（.hover()是简写）。您可以使用delegate()或.on()执行此操作，具体取决于jQuery版本。

以下是你的小提琴中的样子：http://jsfiddle.net/7dcuh/15/

Answer 3

您应该尝试在ajax响应中插入脚本。喜欢

 <script> </script>

或者在ajax调用完成或成功时提供脚本

jQuery.ajax({

success:function(){jQuery('selector').yourfunction();},

        });

如果你不这样做，脚本将运行，而不是在dom中找到选择器，脚本将不再运行

Answer 4

使用.on（）函数检出延迟事件。您可以执行以下活动：

$('#parent').on('hover', '.touch', function() {
    $(this).next('.show').fadeIn(800);
},
function(){
    $(this).next('.show').delay(800).fadeOut(800);
});

OR，纯CSS解决方案是：

.touch + .show {
    display:none;
}
.touch:hover + .show {
    display:block;
}

Answer 5

在插入元素后，您需要在AJAX的成功回调中执行.hover脚本。

Answer 6

如果使用Ajax生成内容，则应使用livequery

Answer 7

这可能不是正确答案，但我找到了在函数中创建的元素。需要在函数中声明它们的选择器。像这样：

function createEle(){
    $('#element').after('<div id="newEle"><div id="inner" style="display:none;"></div></div>');
    $('#newEle').hover(function(){
        $('#inner','#newEle').show();
    },function(){
        $('#inner','#newEle').hide();
    });
}

jquery .hover没有处理AJAX渲染元素

7 个答案: