Ключевое слово Live () не работает при загрузке с динамическими HTML-изображениями - PullRequest
Новая
       20

Ключевое слово Live () не работает при загрузке с динамическими HTML-изображениями

5 голосов
/ 15 июня 2010

У меня есть изображения, которые динамически добавляются на страницу, я не могу заставить событие 'load' динамически работать с live ().

Это код, который у меня сейчас есть: 

$('#largeImg' + nextUniqueItemID).hide();
$('#largeImg' + nextUniqueItemID).live('load' , function() {
    $('#loader' + nextUniqueItemID).hide();
    $('#largeImg' + nextUniqueItemID).show();
});

с '#largeImg' + nextUniqueItemID - это изображение, которое было добавлено на страницу ранее в функции, и '#largeImg' + nextUniqueItemID - это загружаемое изображение.

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

Спасибо за вашу помощь. Я пытался «связать», и это никогда не срабатывало. Я также пытался избавиться от нагрузки, но это не сработало. Есть ли способ присоединить слушателя к событию, которое указывало бы, когда изображение было загружено?

Ответы [ 5 ]

6 голосов
/ 15 июня 2010

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

События загрузки элементов, таких как изображения, не всплывают. 1 , 2

Поскольку они не всплывают, document делаетне знаю, было ли инициировано событие загрузки.

Поскольку document не знает о событии загрузки, прямое отображение станет бесполезным, поскольку прямое включение зависит от событий, восходящих к документу, и как только они это сделают,он сопоставляет цель события с селекторами, которые у него уже есть в файле, и, если что-либо совпадает, для этого элемента запускается обработчик события.

Например, предположим, что вы зарегистрировали следующее прямое событие: 

$("#container > input").live("change", function() {
    alert("changed");
});

, затем jQuery добавит прослушиватель события изменения в объект документа, если он еще не существует (аналогично): 

$(document).bind("change", function() {
    ..
});

Когда любое событие изменения всплывает в документе, онопроходит через каждый зарегистрированный выборr и проверяет, содержит ли какой-либо из результирующих узлов для данного селектора цель события (элемент, из которого произошло событие).Если он присутствует, то для этого события запускается соответствующий «живой» обработчик события.

Ничего из этого не возможно, если документ не будет знать о событии в первую очередь.

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

$("selector").bind("load", function() { .. });
1 голос
/ 15 июня 2010

где находится этот код ?? 

$('#largeImg' + nextUniqueItemID).hide();
$('#largeImg' + nextUniqueItemID).live('load' , function() {
$('#loader' + nextUniqueItemID).hide();
$('#largeImg' + nextUniqueItemID).show();
});

, если это внутри обратного вызова jQuery ajax, вам не нужно использовать .live(), используйте .bind().

0 голосов
/ 16 июня 2010

Вы пытались использовать селектор атрибута вместо прямого идентификатора? 

$('#largeImg' + nextUniqueItemID).hide();
$('[id=largeImg' + nextUniqueItemID + ']').live('load', function() {
    $('#loader' + nextUniqueItemID).hide();
    $('[id=largeImg' + nextUniqueItemID + ']').show();
});
0 голосов
/ 16 июня 2010

В итоге я поместил событие загрузки непосредственно в событие onLoad = "" моего изображения. Это сработало.

0 голосов
/ 15 июня 2010

Я бы посмотрел документацию: http://api.jquery.com/live/

* In jQuery 1.3.x only the following JavaScript events (in addition to custom events) could be bound with .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.

    * As of jQuery 1.4 the .live() method supports custom events as well as all JavaScript events. As of jQuery 1.4.1 even focus and blur work with live (mapping to the more appropriate, bubbling, events focusin and focusout).
    * As of jQuery 1.4.1 the hover event can be specified (mapping to "mouseenter mouseleave").

Все, что вызывает создание, должно также вызывать скрытие и отображение элементов, которые вы используете с событием load.

...