Почему не работает содержимое, загруженное методом load()?

Question

[Евгений Иванов]

Код работает, при простой вставке содержимого в контейнер (div id="player_icons").
Код не работает при загрузке содержимого в контейнер (div id="player_icons") методом load().

При загрузке содержимого в контейнер, не работают все события/функции, связанные с id="user_new_image" class="arcticmodal-close". А при простой вставке в код (ctrl+v) - всё работает.
Почему так происходит и как исправить?

В исходном коде комментариев нет. Добавил тут для наглядности.
Часть кода.

<!-- Ссылка. Открывает модальное окно, загружает в него (div id="player_icons") картинки -->
<a onclick="$('#user_change_image_window').arcticmodal(); load_player_icons();">Открыть окно с картинками</a>

<!-- Модальное окно, с картинками. Они будут загружены в контейнер div id="player_icons" -->
<div style="display:none;">
<div class="box-modal" id="user_change_image_window">
<div id="player_icons">
</div>
</div>
</div>

<!-- Функция, загружающая картинки (код) из файла 'player_icons.html. Работает и загружает.-->
<script>
function load_player_icons() {$('#player_icons').load('player_icons.html');};
</script>

Файл 'player_icons.html

<img src="01.png" id="user_new_image" class="arcticmodal-close">
<img src="02.png" id="user_new_image" class="arcticmodal-close">

Answer 1

[Кирилл Ушаков]

Вешайте события через $('body').on(event, elem, callback);

Comments

[Евгений Иванов]

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

[napa3um]

logpol32: слушатель событий привязывается к элементу в момент объявления слушателя. Если вы объявили слушателя до того, как создали элементы DOM, то слушатель ни к чему не привязался. Потому вам посоветовали привязать слушателя событий к элементу, который точно УЖЕ есть в документе и никуда не денется - к элементу body.

Answer 2

[Dmitriy975]

Cобытия/функции, связанные с id="user_new_image" не работают, потому что событий на этих элементах нет. Т.к. на момент когда события вешались этих элементов не было. Могу предложить вешать события на эти элементы после того как вы подгрузите их.

Comments

[Евгений Иванов]

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

[Dmitriy975]

logpol32: В конце подгружаемого файла добавлять не красиво... Я хотел предложить что то типо
$("#player_icons").load("player_icons.html", function() {
// тут вешаем свои события на уже существующие элементы
});

Answer 3

[Pretor DH]

ajax.load( {url} ) - только подгружает html, js при этом не выполняется. Связано это с безобасностью.

Для загрузки скриптов используй $.getScript().

Смотри инструкцию

id не могут быть одинаковые!!!

<img src="01.png" id="user_new_image1" class="user_new_image arcticmodal-close">
<img src="02.png" id="user_new_image2" class="user_new_image arcticmodal-close">

А по событиям пробуй вешать делегированные:

$('#user_change_image_window').on('click','.user_new_image',function() { ... });