IE7 和 8 不会为附加在表格中的元素触发 jQuery 单击事件

IE7 & 8 not fireing jQuery click events for elements appended inside a table

提问by Keith

I have an IE bug that I'm not sure how to fix.

我有一个 IE 错误，我不知道如何修复。

Using jQuery I'm dynamically moving a menu to appear on an element on mouseover.

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

My code (simplified) looks something like this:

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

$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());
    });
}

This menu doesn't seem to register events correctly for the menu after it's been moved in IE7, IE8 and IE8-as-IE7 (yeah MS, that's really a 'new rendering engine' in IE8, we all believe you).

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

It works as expected in everything else.

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

You can see the behaviour in a basic demo here.

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

In the demo you can see two examples of the issue:

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

1. The image behind the buttons should change on hover (done with a CSS :hover selector). It works on the first mouseover but then persists.
2. The click event doesn't fire – however with the dev tools you can manually call it and it is still subscribed.

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

You can see (2) in IE8's dev tools:

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

1. Open pagein IE8
2. Open dev tools
3. Select "Script" tab and "Console" sub-tab
4. Type: $j('#testFloat div.ico:first').click()to manually call any subscribed events
5. There will be an alert on the page

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

This means that I'm notlosing the event subscriptions, they're still there, IE's just not calling them when I click.

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

Does anyone know why this bug occurs (other than just because of IE's venerable engine)?

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

Is there a workaround?

有解决方法吗？

Could it be something that I'm doing wrong that just happens to work as expected in everything else?

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

采纳答案by Eifion

Strangely, although your click event isn't firing in IE, if you change it to either mousedown or mouse up it works as you'd expect although you still have your image hover issue.

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

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

回答by altschuler

I had the same problem, but none of the previous solutions worked. The problem turned out to be that IE7 (I haven't tested other versions of IE) will not register the .click if it's chained after an animate function. So this will NOTwork:

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

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

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

But this WILLwork

但是，这WILL工作

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

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

EDIT: The same is true for mouseenter, mouseleave, etc.

编辑：mouseenter、mouseleave 等也是如此。

EDIT 2: It will still fire events and animate if you chain the animate function AFTER the click, so this is "valid" too:

编辑 2：如果您在点击后链接动画功能，它仍然会触发事件并设置动画，所以这也是“有效的”：

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

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

回答by Chad Grant

IE doesn't copy events to items dynamically appended to the DOM.

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

Try binding your click event after you have added what you need to be bound or use .live()

添加需要绑定的内容或使用 .live() 后，尝试绑定您的点击事件

if you are using clone() remember to pass clone(true) to explicitly request copying of event handlers.

如果您使用 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 is chainable, so you can also write this in "jQuery" syntax as:

jQuery 是可链接的，因此您也可以使用“jQuery”语法将其编写为：

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

$j(this).append(clone);

I don't think you need the show/hide since it happens so fast.

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

回答by Richard

I would highly recommend using the Live events instead from the latest jquery.

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

this way you can bind to elements by css class which have not been created at the beginning but the click binding will be added when the new elements are added:

通过这种方式，您可以通过在开始时尚未创建的 css 类绑定到元素，但在添加新元素时将添加单击绑定：

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

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