javascript - 如何使用 jquery appendTo() 将列表项与按钮组合起来？

Question

到目前为止，我有我的列表项和它下面的按钮，我希望我的按钮位于列表项的下一个旁边。我尝试使用 name = 但它只是输出按钮 html 的字符串版本，而不是实际的 html 按钮本身

  function addCheckbox(name, id) {
     var container = $('#sortable');
     var items = container.find('li');
    //name = name+ '<button type="button" id = "delete" value="delete">Delete</button>';
     $('<li /> ', { 'id': 'cb_'+id, text:''+ name }).appendTo(container);
     $('<button> ', { 'id': 'delete', value:'delete' , text:'delete' }).appendTo(container);
   }

Answer 1

将按钮 append 到 li

var li = $('<li /> ', { 'id': 'cb_'+id, text:''+ name });
li.appendTo(container);
$('<button> ', { 'id': 'delete', value:'delete' , text:'delete' }).appendTo(li);

此外，如果您有多个删除按钮，则需要使删除按钮的 id 唯一。使用常见的类名并仅监听单击事件。

$(container.on("click", "button.deleteClass", function () {
    console.log(this);
    //$(this).closest("li").remove();
});