Хотел поделиться подходом.
В JQuery есть отличная конструкция .on которая позволяет навешивать события на элемент и все вложенные в него элементы. Я решил немного продолжить данный подход и пойти еще дельше. У себя в скриптах не привязываюсь к разным элементам а только к одному. Причем использую это динамически. Все события вешаются на один элемент в котором написан скрипт. Делаю это так.
<div>
<script>
(function($, script){
$(script).parent().one("init", function(e){
setTimeout(function(){
console.log("outerHTML",$(e.currentTarget).get(0).outerHTML)
}, 100)
}).on("click", "a", function(){
alert("click");
}).trigger("init")
})(jQuery, document.scripts[document.scripts.length-1])
</script>
</div>
Все события при таком подходе висят на div никаких классов идентификаторов не нужно. Получается, что переместив скрипт я автоматически перемещаю весь код в другой элемент. При развешивании событий можно не беспокоиться о пересечении с классами или элементами в других модулях и разделах. Удалив вышестоящий элемент я удаляю и весь его код. Все события работают только для элементов находящихся внутри элемента скрипта. Хотелось бы услышать отзывы и возможно кто то сможет внести полезные коррективы. |