0

我有一个简单的 hover() 事件，在这里效果很好：http ://waterworks.reuniondesign.com/rates （将鼠标悬停在其中一个单号上）

它在这里的主页上效果很好，我已经取消隐藏它：http ://waterworks.reuniondesign.com/ （向下滚动）

但是当在首页点击“点击这里进行码头布局”，将div做成simplemodal box时，鼠标悬停在单号上时会触发两次hover()事件。这是为什么？我尝试制作一个设置变量以查看它是否已经启动的东西，但它没有用。有任何想法吗？

这是执行悬停事件的代码。jLoader 是一个 ajax 函数：

    $(document).ready(function(){
    var live = false;
    $('.slip').hover(function(){
        console.log('opening ' + live);
        if (live != true) {
            live = true;
            console.log('still opening ' + live);
            $(this).css('z-index','999');
            $(this).delay(500).append("<div id='slip_popup'><div id='slip_details'>loading slip details...</div></div>");
            jLoader('/blocks/slip_detail.php?slip_number=' + $(this).attr('id').replace('slip_',''),'replace','slip_details');
        }
    },function(){
        $(this).css('z-index','1');
        $('#slip_popup').remove();
        live = false
        console.log('closing ' + live);
    });
});

最后，如果有人知道为什么延迟函数在 append() 函数之前不起作用，我很想知道！

4

1 回答 1

0

好的，我已经弄清楚了，尽管有些人可能能够详细说明。发生的事情是 simplemodal 脚本不会破坏原始 div 及其内容，它只是克隆它。这意味着如果 div 在 simplemodal 调用之前存在，那么该 div 内的任何内容现在在 DOM（？）的某个地方都有多个实例。

jquery hover() 函数一定会以某种方式感到困惑，因为在 DOM 中有多个具有完全相同 id 的元素实例，因此当您将鼠标悬停在其中一个上时它会被调用两次，然后运行其余的悬停脚本，附加两个 div 并用 ajax 调用填充它们两次。

所以我最终做的是在 simplemodal 之后使用 Ajax 调用来填充模态框的内容。这样，元素在模态调用后被添加到 DOM中，因此不会重复。

于 2012-01-05T00:20:50.613 回答