делегирование событий против прямой привязки при добавлении сложных элементов на страницу
У меня есть такая разметка (классы только для объяснения):
<ol id="root" class="sortable">
<li>
<header class="show-after-collapse">Top-Line Info</header>
<section class="hide-after-collapse">
<ol class="sortable-connected">
<li>
<header class="show-after-collapse">Top-Line Info</header>
<section class="hide-after-collapse">
<div>Content A</div>
</section>
</li>
</ol>
</section>
</li>
<li>
<header/>
<section class="hide-after-collapse">
<ol class="sortable-connected">
<li>
<header/>
<section class="hide-after-collapse">
<div>Content B</div>
</section>
</li>
</ol>
</section>
</li>
</ol>
То есть вложенные сортируемые списки. Однако сортируемого плагина достаточно, так как каждый li (в дальнейшем «item») сохраняет свой уровень, хотя внутренние списки связаны между собой. Элементы имеют всегда видимый заголовок и раздел, видимый в развернутом состоянии, переключаемый при нажатии на заголовок. Пользователь может добавлять и удалять элементы с любого уровня по желанию; добавление элемента верхнего уровня будет включать в себя пустой список гнезд. Мой вопрос касается инициализации JS вновь созданного элемента: хотя они будут использовать некоторые общие функции, которые я могу охватить с помощью
$("#root").on("click", "li > header", function() {
$(this).parent().toggleClass("collapsed");
});
а также
li.collapsed section {
display: none;
}
(Дополнительный вопрос: будет ли это подходящим местом для использования тегов HTML5 «подробности / сводка»? Кажется сомнительным, смогут ли они даже превратиться в окончательную спецификацию, и мне нужен скользящий переход, поэтому мне кажется, что в любом случае для этого нужен JS. Но я бросаю вопрос в массы. Привет, массы.)
Если корневой список является единственным (релевантным) элементом, который гарантированно существует при загрузке страницы, чтобы .on () работал эффективно, я должен связать все события с этим элементом и прописать точный селектор для каждого, так как я понимать это. Так, например, чтобы связать отдельные функции с двумя кнопками, расположенными рядом друг с другом, мне бы приходилось каждый раз прописывать селектор полностью, а ля
$("#root").on("change", "li > section button.b1", function() {
b1Function();
}).on("change", "li > section button.b2", function() {
b2Function();
});
Это точно? В таком случае, имеет ли смысл отказываться от .on () и связывать мои события во время добавления нового элемента на страницу? Общее количество предметов, вероятно, будет не более десятков, если это повлияет на ответ.