Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не работают срикпты в контенте, подгруженным Ajax-ом (https://javascript.ru/forum/misc/41939-ne-rabotayut-srikpty-v-kontente-podgruzhennym-ajax-om.html)

fe1ix 05.10.2013 22:24

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

Всем привет.

Перепробовал все, что смог найти в Интернете, ничего не помогло.

$.ajax({
            url: 'some_url',
            method: 'POST',
            data: {"some" : data},
            }).done(function(data){    
            data = jQuery.parseJSON(data);
            if (data.length > 0) {
            $.each(data, function(index, data){   
            $("#posts").append("some_html" + data);
            });           
            }});


После того, как добавляю новые записи аяксом, на контенте в DIV с id=posts перестают работать уже загруженные ранее яваскрипты. Проблема знаю в чем, но как мне заново "запустить", допустим, скрипт http://site.ru/js/script.js для новосозданных постов?

<div id="posts">
<div id="post_1">some_data</div>
<div id="post_2">some_data</div>
...
<!--Новые посты, подгруженные Ajax-ом, на которые не срабатывают яваскрипты, загруженные выше по странице-->
<div id="post_7">some_data</div>
....
</div>

ruslan_mart 06.10.2013 11:22

fe1ix, а что именно не работает в скрипте? События?

danik.js 06.10.2013 14:35

Цитата:

Сообщение от fe1ix
$("#posts").append("some_html" + data);

Вы наверно не понимаете что делает это код. Он очищает innerHTML элемента, что влечет за собой удаление всех элементов, естественно со всеми привязанными обработчиками, далее идет присвоение старого значение innerHTML + новая строка, что влечет за собой пересоздание всех элементов заново, уже конечно без каких либо обработчиков.
Решение:
1) Не использовать innerHTML, добавляя новые элементы через Element.prototype.appendChild , предварительно навешав нужные обработчики.
2) Навешивать обработчики не на посты, а на контейнер, и уже в обработчиках отслеживать целевой элемент события и в зависимости от него уже исполнять тот или иной код. Это называется делегирование событий (его поддержка уже встроена в jQuery)

fe1ix 07.10.2013 23:38

Спасибо за помощь, сильно сложно для меня получилось уловить все вышесказанные моменты.
Пока сделал так:
$("#posts").append("<script>...</script> some_html " + data);

и нужный код заработал.

Понимаю, что не сильно по хен шуй получается, но работает. Будем изучать.

Было бы конечно шикарно увидеть как именно перевызвать код из стороннего файла, а не прописывать код непосредственно в html.

danik.js 08.10.2013 00:35

Я кстати насчет append и innerHTML наверно ошибаюсь. Нужно посмотреть исходники jQuery...


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