Обработчики событий jQuery не запускаются в IE

Question

У меня есть список элементов на странице с набором элементов управления MoveUp, MoveDown и Delete.

Элементы управления находятся в верхней части списка, скрытого по умолчанию. Когда вы наводите курсор мыши на строку элемента, я выбираю элементы управления с помощью jquery

//doc ready function:
..
var tools = $('#tools');
$('#moveup').click(MoveUp);
$('#movedn').click(MoveDn);
$('#delete').click(Delete);
..
$('li.item').mouseover(function(){
    $(this).prepend(tools);
});

Это прекрасно работает в Firefox .. инструменты перемещаются в текущую строку, а события click вызывают функции ajax. Однако в IE6 и IE7 .. щелчка не происходит. Я пытался отменить привязку при наведении мыши и повторную привязку при каждом наведении мыши ... безрезультатно.

Я также изучил различные причины за пределами javascript (например, прозрачные конфликты png, z-index, position: absolute) .. также не найдено решение.

Мне в конечном итоге нужно было добавить строку инструментов к каждому элементу и показать / скрыть при наведении курсора мыши. Работает так же хорошо - единственный недостаток в том, что у меня есть намного больше разметки «инструментов» на моей странице.

Кто-нибудь знает, почему IE игнорирует / сбрасывает / убивает события мыши после перемещения объектов (используя prepend)? И почему повторное связывание события также не имеет никакого эффекта? Держал меня раздраженным в течение почти 2 часов, прежде чем я сдался.

Answer 1

IE будет терять события в зависимости от того, как вы добавляете вещи в DOM.

var ele = $("#itemtocopy");

$("#someotheritem").append( ele ); // Will not work and will lose events

$("#someotheritem").append( ele.clone(true) );

Я бы также рекомендовал использовать .live () для событий click, чтобы немного упростить ваш код. Mouseover / out еще не поддерживается live. http://docs.jquery.com/Events/live

Answer 2

Я потратил целый день на устранение неполадок, связанных с элементами, добавленными в DOM (IE7, jQuery 1.4.1), и это было не потому, что мне нужно было использовать live () (хотя, кстати, Чад) и не потому, что мне нужно было клонировать предметы.

Это было из-за того, что я выбирал якорные теги, в которых было "#", например:

var myitem = $('a[href=#top]');

Мое решение состояло в том, чтобы использовать «Атрибут Содержит Селектор» следующим образом:

var myitem = $('a[href*=top]');

К счастью, у меня достаточно контроля над всем, что вряд ли сломается в будущем. Технически это не связано с добавляемыми объектами, но, надеюсь, это сэкономит кому-то время.

Answer 3

У меня была похожая проблема. пытаюсь использовать .ready для загрузки div при начальной загрузке страницы. хорошо работает в FF, но не ie7.

Я нашел хак, который, кажется, обходит это.

У меня есть обратный вызов load, divLoaded ().

В divLoaded я проверяю $ ('# targetdiv'). InnerText.length <50 или что вы думаете, будет означать, что он не загружался. Если я обнаружу этот случай, я просто вызываю функцию, которая загружает этот div снова. </p>

Как ни странно, я также добавляю '.' на innerText, прежде чем я вспоминаю функцию AJAX. Кажется, что иногда мы проходим 3 или 4 цикла, прежде чем нагрузка на ajax наконец-то принимает.

Это наводит меня на мысль, что document.ready работает довольно безупречно в IE7, что, похоже, развеивает миф о ненадежности. То, что действительно «кажется» происходит, - то, что .load немного ненадежен и не работает хорошо, когда страница только что загружена.

Я все еще немного зелен с всеми вещами jQuery, так что возьми это с крошкой соли. Интересно услышать, что кто-то принимает мою маленькую гипотезу.

ура

Greg