Повторно применить JS к динамически генерируемому контенту

Question

Каков наилучший способ повторно применить JS к динамически генерируемому контенту? Я сказал "повторно применить JS", а не "перепривязать события", потому что подразумевается "повторно применить JS, который связывает события и также изменяет dom", то, что я сделал до сих пор, выглядит примерно так:

main.js:
function repplyDynamic(){
    $('.dynamic:not(.js-initialized)').each(function(){
        $(this).addClass('js-initialized').append('<div class="chaging_dom"></div>').click(function(){
            alert("Ae!");
        });
    });
}


other_code.js
$('body').append('<div id="dynamic">content</div>'); // could be a ajax call
reapplyDynamic();

Но я думаю, что это очень грязно. Ребята, у вас есть лучший подход?

Answer 1

Лично у меня есть функция под названием dommods() он выполняет все необходимые мне модификации (всплывающие подсказки, формы, автоматическое изменение размера текстовых полей и т. д.) и вызывает его после каждого нетривиального изменения в DOM.

Другими словами, именно то, что вы делаете, но с другим именем функции. Ничего плохого в этом нет.

Answer 2

//main.js
function applyDynamicStuff(content){
    return content                                  //return content
        .append('<div class="chaging_dom"></div>')  //with appended element
        .click(function(){                          //with click hander
            alert("Ae!");
        });
}

//other_code.js 
var dynamicItem = $('<div>content</div>')           //the new content
applyDynamicStuff(dynamicItem).appendTo('body');    //apply Dynamic stuff and append to body

Answer 3

Вы можете использовать метод jQuery $(). On, чтобы прикрепить обработчики событий к текущим или будущим элементам HTML.