Question

我在这里有一个简单的hover（）事件：http://waterworks.reuniondesign.com/rates（将鼠标悬停在其中一个单据号码上）

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

但是当点击主页上的“点击这里进行码头布局”并将div设置为一个简单模式框时，当一个鼠标悬停一个单号时，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（）函数之前没有用，我很想知道！

Answer 1

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

jquery hover（）函数必须以某种方式混淆，因为在DOM中有一个元素具有完全相同的id的多个实例，所以当你将鼠标悬停在其中一个上时，它会被调用两次，然后运行其余的悬停脚本，附加两个div并用两次ajax调用填充它们。

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

Jquery simplemodal导致hover（）多次触发？

1 个答案: