IE7 & 8 не пропускает события jQuery click для элементов, добавленных внутри таблицы

У меня ошибка 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 old
        //parent to the end of this one.
        $j(this).append($j(menuSelector).show());
    });
}

Это меню, похоже, неправильно регистрирует события для меню после его перемещения в IE7, IE8 и IE8-as-IE7 (да, MS, это действительно "новый движок рендеринга" в IE8, мы все считаем).

Он работает как ожидалось во всем остальном.

Вы можете увидеть поведение в базовом демо.

В демо вы можете увидеть два примера проблемы:

  • Изображение за кнопками должно изменяться при наведении (выполняется с помощью селектора CSS: hover). Он работает с первым указателем мыши, но затем сохраняется.
  • Событие click не срабатывает - однако с помощью инструментов dev вы можете его вручную вызвать и он все еще подписан.

Вы можете видеть (2) в инструментах IE8 dev:

  • Откройте page в IE8
  • Откройте инструменты для разработчиков
  • Выберите вкладку "Script" и "Консоль"
  • Тип: $j('#testFloat div.ico:first').click() для вызова любых подписанных событий вручную
  • На странице появится сообщение

Это означает, что я не теряю подписки на события, они все еще там, IE просто не вызывает их, когда я нажимаю.

Кто-нибудь знает, почему эта ошибка возникает (кроме как только из-за почтенного движка IE)?

Есть ли способ обхода?

Может ли это быть чем-то, что я делаю неправильно, что просто происходит, как ожидается, во всем остальном?

Ответы

Ответ 1

Странно, хотя ваше событие click не запускается в IE, если вы меняете его на mousedown или mouse up, оно работает так, как вы ожидали бы, хотя у вас все еще есть проблема с отображением изображения.

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

Ответ 2

У меня была та же проблема, но ни один из предыдущих решений не работал. Проблема оказалась в том, что IE7 (я не тестировал другие версии IE) не зарегистрировал .click, если он закодирован после функции анимации. Таким образом, это будет НЕ:

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

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

Но эта WILL работает

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

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

EDIT: То же самое верно для mouseenter, mouseleave и т.д.

РЕДАКТИРОВАТЬ 2. Он по-прежнему будет запускать события и оживлять, если вы подключите функцию анимации ПОСЛЕ щелчка, так что это тоже "действительный":

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

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

Ответ 3

IE не копирует события в элементы, динамически добавленные в DOM.

Попробуйте привязать событие click после добавления того, что вам нужно связать или использовать .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);

Я не думаю, что вам нужно шоу/скрыть, так как это происходит так быстро.

Ответ 4

Я бы настоятельно рекомендовал использовать события Live вместо последнего jquery.

таким образом вы можете привязать элементы к классу css, которые не были созданы в начале, но привязка клика будет добавлена ​​при добавлении новых элементов:

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