在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/