5

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

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

这是我的例子的一个小提琴。

4

7 回答 7

10

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

$(document).on({
    mouseenter: function() {
        $(this).next('.show').fadeIn(800);
    },
    mouseleave: function() {
        $(this).next('.show').delay(800).fadeOut(800);
    }
}, '.touch');
于 2012-12-27T15:06:53.867 回答
6

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

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

于 2012-12-27T15:07:12.003 回答
2

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

 <script> </script>

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

jQuery.ajax({

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

        });

如果你不这样做，脚本将运行并且在 dom 中找不到选择器并且脚本不会再次运行

于 2012-12-27T15:14:20.053 回答
1

使用 .on() 函数检查延迟事件。您可以进行如下活动：

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

或者，纯 CSS 解决方案是：

.touch + .show {
    display:none;
}
.touch:hover + .show {
    display:block;
}
于 2012-12-27T15:08:11.180 回答
0

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

于 2012-12-27T15:05:44.407 回答
0

如果内容是用 Ajax 生成的，你应该使用livequery

于 2012-12-27T15:05:54.187 回答
0

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

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();
    });
}
于 2012-12-27T15:07:52.013 回答