Создайте элемент в jQuery, затем вставьте его с событием

Question

Я создаю элемент, а затем вставляю его, но он не работает должным образом. Для создания элемента:

var showChildren = $("<span>", { text: "[arrow]", class: "show-children" }); 

Затем, чтобы вставить его, я попробовал:

$("body").append(showChildren); 

Но ничего отображалось, поэтому я осмотрел то объект попытался вместо этого:

$("body").append(showChildren[0].outerHTML); 

Этот отображает элемент как ожидалось, но кажется немного неудобным. Моя цель - приложить к нему обработчик событий. Я думал, что-то вроде этого может работать:

showChildren.on("click", function(e) { 
    $(this).siblings("ul").toggle(); 
}); 

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

Answer 1

Что касается лучшего способа, я не знаю, что лучше, все может быть просто субъективным для каждого разработчика. Но вот еще один способ создать, добавить и приложить прослушиватель, используя цепочку.

$("<span>", { 
    text: "[arrow]", 
    class: "show-children" 
}).appendTo('body').on("click", function (e) { 
    $(this).siblings("ul").toggle(); 
}); 

И код, который вы писали выше, кажется, работает хорошо в скрипкой: http://jsfiddle.net/b5tb4mer/

Answer 2

Для добавления, если нет веских причин, просто построить HTML вручную, без использования JQuery:

$('body').append('<span class="show-children">[arrow]</span>'); 

Для события, используйте делегирование:

$('body').on('click', '.show-children', function (e) { 
    $(this).siblings('ul').toggle(); 
}); 

Вы можете сделать вложение событий в ваш обработчик документа один раз, и он будет срабатывать независимо от того, сколько раз вы добавляете этот HTML.