Question

我有一个IE错误，我不确定如何解决。

使用jQuery我动态移动菜单以在鼠标悬停时出现在元素上。

我的代码（简化）看起来像这样：

$j = jQuery.noConflict();

$j(document).ready(function()
{
    //do something on the menu clicks
    $j('div.ico').click(function() { alert($j(this).parent().html()); });

    setUpActions('#tableId', '#menuId');
});

//on mouseover set up the actions menu to appear on mouseover
function setUpActions(tableSelector, menuSelector)
{
    $j(tableSelector + ' div.test').mouseover(function()
    {
        //note that append will move the underlying
        //DOM element with all events from it's old
        //parent to the end of this one.
        $j(this).append($j(menuSelector).show());
    });
}

这个菜单似乎没有在IE7，IE8和IE8-as-IE7中移动后正确地为菜单注册事件（是的MS，这在IE8中真的是一个'新的渲染引擎'，我们都相信你）

它在所有其他方面都可以正常运作。

您可以在 a basic demo here 中看到该行为。

在演示中，您可以看到两个问题示例：

按钮后面的图像应在悬停时更改（使用CSS：hover选择器完成）。它适用于第一次鼠标悬停，但随后仍然存在。
点击事件不会触发 - 但是使用开发工具，您可以手动调用它，但仍然可以订阅。

你可以在IE8的开发工具中看到（2）：

在IE8中打开page
打开开发工具
选择“脚本”标签和“控制台”子标签
键入：$j('#testFloat div.ico:first').click()以手动调用任何已订阅的事件
页面上会有提醒

这意味着我不会丢失事件订阅，它们仍然存在，IE只是在我点击时没有调用它们。

有谁知道为什么会出现这个错误（除了因为IE引人注目的引擎）？

有解决方法吗？

这可能是我做错了，恰好在其他所有事情中按预期工作了吗？

Answer 1

奇怪的是，虽然您的点击事件未在IE中触发，但如果您将其更改为mousedown或鼠标上移，它可以正常工作，尽管您仍然有图像悬停问题。

$j('div.ico').mouseup(function() { alert($j(this).parent().html()); });

Answer 2

我遇到了同样的问题，但之前的解决方案都没有奏效。问题原来是IE7（我没有测试其他版本的IE）如果在动画功能之后被链接，则不会注册.click。所以这将 NOT 工作：

$("div.menubar-item").animate({
    color:"#000"
}, 0)

.click(function()
{
    //not firing
})

但将工作

$("div.menubar-item").click(function()
{
    //firing!
})

$("div.menubar-item").animate({
    color:"#000"
}, 0)

编辑：对于mouseenter，mouseleave等也是如此。

编辑2 ：如果您在点击后链接动画功能，它仍会触发事件和动画，因此这也是“有效”：

$("div.menubar-item").click(function()
{
    //firing!
})

.animate({
    color:"#000"
}, 0)

Answer 3

IE不会将事件复制到动态附加到DOM的项目。

在添加了需要绑定的内容或使用.live（）

之后，尝试绑定点击事件

如果您使用clone（），请记住传递clone（true）以显式请求复制事件处理程序。

var actionMenu = $j(menuSelector);

//actionMenu is now an Instance of jQuery, not the DOM object
//because jQuery is chainable

actionMenu.hide();

// notice the clone(true)

$j(this).append( actionMenu.clone(true) );

jQuery是可链接的，所以你也可以用“jQuery”语法写成：

var clone = $j(menuSelector)
               .clone(true)
               .css('background-color', $j(this).css('background-color') );

$j(this).append(clone);

我认为你不需要显示/隐藏，因为它发生得太快了。

Answer 4

我强烈建议您使用Live事件，而不是最新的jquery。

这样你可以通过css类绑定到元素，这些元素在开头没有创建，但是在添加新元素时会添加点击绑定：

http://docs.jquery.com/Events/live

IE7＆amp; 8不会为表中附加的元素触发jQuery单击事件

4 个答案: