Question

我有一个简单的鼠标悬停事件，我正在尝试处理使用ajax加载的元素。例如，我有一个div，当你鼠标悬停/显示另一个div。当我通过ajax加载这些div时，它们不再起作用。例如：

<div class="block">
    <div class="something">MOUSEOVER</div>
    <div class="else" style="display: none" >HI</div>
</div>

$(document).ready(function(){
    //using on hoping to catch the mouse events
    $('.block').on('mouseenter',function(){
        $(this).children('.else').fadeIn('fast');
    });
    $('.block').on('mouseleave',function(){
        $(this).children('.else').fadeOut('fast');
    });
});

这可以像this一样正常工作：

但是当我从另一个页面加载这些元素时：

$j('#trigger').load( url + " .block");

不再识别鼠标事件。我认为这是live，on，delegate的用途。有人可以帮我解决这个问题。

Answer 1

一种可能性是更改您的代码，如：

var myFunc = function() {
    $('.block').on('mouseenter',function(){
        $(this).children('.else').fadeIn('fast');
    });
    $('.block').on('mouseleave',function(){
        $(this).children('.else').fadeOut('fast');
    });
}

$('#trigger').load(url + " .block", function() {
    myFunc();
});

可以在加载的内容中使用像mouseenter或mouseleave这样的函数。

另一种可能性是$.live();。像：

$('.block').live('mouseenter', function() {
   //here your code
});

Answer 2

这正是on和delegate等方法可以使用的方法，但必须正确使用。

当事件从它们起源的元素通过DOM冒泡时，您需要在已经存在的祖先元素上捕获事件：

$(".someAncestor").on("mouseenter", ".something", function() {
    //Executed when .something triggers the mouseenter event
});

看起来您正在通过AJAX加载整个.block元素，因此您需要将事件绑定到DOM树上方的某个位置（可能是您附加.block的元素。）< / p>

Answer 3

您可以在AJAX成功时加载触发器事件。

让鼠标事件在动态加载的元素上运行

3 个答案: