在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

为了附加，除非有令人信服的理由，否则只需手动构建HTML而不使用jQuery：

$('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/