在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

对于追加，除非有令人信服的理由，否则无需使用jQuery即可手动构建HTML：

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

对于事件，请使用委托：

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

您可以一次在文档就绪处理程序中进行事件附件，无论您添加该HTML多少次，事件附件都会触发。

Answer 2

至于更好的方法，我不知道有什么更好的方法，这对每个开发人员来说都是主观的。 但是，这是使用链接创建，附加和附加侦听器的另一种方法。

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

而且您上面编写的代码似乎可以在小提琴中正常工作： http : //jsfiddle.net/b5tb4mer/