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

У меня есть список элементов на странице с набором элементов управления 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 часов, прежде чем я сдался.

3 ответа

Решение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ура

Greg

Другие вопросы по тегам