Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Почему не работает JS с подгруженными в DOM элементами? (https://javascript.ru/forum/jquery/2019-pochemu-ne-rabotaet-js-s-podgruzhennymi-v-dom-ehlementami.html)

V-z-z-HobboT 21.10.2008 21:20

Почему не работает JS с подгруженными в DOM элементами?
 
Собственно сабж.

Прописана следующая функция:
Код:

$(document).ready(function(){
    $("a.thumbs").click(function(){
        var largePath=$(this).attr("href");
        $("#largeImg").attr({src:largePath});
        return false;
    });
});

AJAX`ом подгружаю несколько ссылок с картинками ("a.thumbs") и innerHTML`ю в DOM. Но пчему-то не работает указанный код.
В чем проблема?

ЗЫЖ В статичной страничке все, естессно, ок.

Octane 21.10.2008 21:44

Есть же раздел для «jQuery», неужели он такой незаметный…

Не работает, потому что Вы добавляете события массиву ссылок с классом «thumbs» в тот момент, когда их ещё нет в документе (т.е. действие в «jQuery» происходит над пустым массивом, другими словами ничего не происходит), так приведённый вами код выполняется по событию «DOMContentLoaded» ($(document).ready(…)), а ссылки, как вы написали, добавляются уже после, через AJAX.

V-z-z-HobboT 21.10.2008 21:51

И как же этого избежать? Дело в том, что если я даже подгружаемым ссылкам пропишу href нечно вроде:
<a href="javasсript:alert('та ё-маё!');">...</a>
и это не работает.

V-z-z-HobboT 22.10.2008 06:54

Немного поменял, поставил это конструкцию после загрузки элементов "a.thumbs":
Код:

$("a.thumbs").click(function(){
    var largePath=$(this).attr("href");
    $("#largeImg").attr({src:largePath});
    return false;
});

Но все равно не работает. Что самое интересное, если в файрбаге поставить брейкпоинт сюда:
Код:

...
$("a.thumbs").click(function(){
...

а потом продолжить выполнение скрипта - все работает, как надо.

Gvozd 22.10.2008 14:53

естесна работает, так как пока вы щелкните на продолжение скрипта, уже придет асинхронный ответ, и объекты создадутся, и $("a.thumbs") будет не пустым.вам же ясно написали
Цитата:

Сообщение от Octane
Не работает, потому что Вы добавляете события массиву ссылок с классом «thumbs» в тот момент, когда их ещё нет в документе

а при такой задержке, массив уже не пустой.
для решения проблемы советую
function(){
    $("a.thumbs").click(function(){
        var largePath=$(this).attr("href");
        $("#largeImg").attr({src:largePath});
        return false;
    });
}
поместить не в $(document).ready(), а в конец обраьотчика вашего Ajax-запроса, и вызвать там же. тогда должо работать

ostrov 30.03.2009 12:50

Аналогичная ситуация. Поставил click загружаемого элемента в конце (вне области $(document).ready() ), но обработчик не работает, подгруженный элемент имеет length 0 (проверял заменяя добавляя в погружаемій элемент onclick="testFunc()" ).

Gvozd 30.03.2009 14:02

ostrov,
и что же вы ожидаете, поставив код "в конце", вне $(document).ready()?
естественно не работает, ПОТОМУ ЧТО ЭЛЕМЕНТА ЕЩЕ НЕТ!!!!!!!!
и быть не может.
потому что надо вешать обработчики когда элемент уже есть.
если он прописан в коде нормально, то вешать обработчик надо в $(document).ready().Если элемент создается после ответа с сервера, то там же и вешаем ему событие


Часовой пояс GMT +3, время: 20:39.