13

我有一个 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 中的“新渲染引擎”，我们都相信你）。

它在其他所有方面都按预期工作。

您可以在此处查看基本演示中的行为。

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

  1. 按钮后面的图像应在悬停时更改（使用 CSS :hover 选择器完成）。它在第一次鼠标悬停时有效，但随后仍然存在。
  2. click 事件不会触发 - 但是使用开发工具您可以手动调用它并且它仍然被订阅。

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

  1. 在 IE8 中打开页面
  2. 打开开发工具
  3. 选择“脚本”选项卡和“控制台”子选项卡
  4. 类型：$j('#testFloat div.ico:first').click()手动调用任何订阅的事件
  5. 页面会有提示

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

有谁知道为什么会出现这个错误（不仅仅是因为 IE 的古老引擎）？

有解决方法吗？

会不会是我做错了什么，只是碰巧在其他所有事情上都按预期工作？

4

4 回答 4

10

奇怪的是，虽然您的点击事件没有在 IE 中触发，但如果您将其更改为 mousedown 或 mouse up 它会按预期工作，尽管您仍然存在图像悬停问题。

$j('div.ico').mouseup(function() { alert($j(this).parent().html()); });
于 2009-04-26T09:00:09.717 回答
2

我有同样的问题，但以前的解决方案都没有奏效。问题原来是 IE7（我没有测试过其他版本的 IE）不会注册 .click 如果它被链接在一个动画函数之后。所以这不起作用：

$("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)
于 2011-09-01T11:14:11.577 回答
1

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);

我认为您不需要显示/隐藏，因为它发生得如此之快。

于 2009-04-23T04:07:42.890 回答
0

我强烈建议使用最新的 jquery 中的 Live 事件。

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

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

于 2009-04-22T11:03:41.133 回答