javascript - 将选择器添加到动态生成的 元素中

Question

我正在尝试动态生成 html 内容。然而，似乎每当我向 li 元素添加标签或选择器时，代码都会出现故障

Correct behavior

Incorrect behavior

$('#btnName').click(function(){
    var text = $('#inputName').val() + '<button>x</button>';
    if(text.length){
        $('<li name="somename" id="someid"/>', {html: text}).appendTo('ul.justList') // adding name tag and id selector cause error
    }
});

$('ul').on('click','button' , function(el){
    $(this).parent().remove()
});

Answer 1

Demo

使用第二个参数设置其他属性而不是将它们写在标签中。此外，您不需要自行关闭标签。

$('#btnName').click(function(){
    var text = $('#inputName').val() + '<button>x</button>';
    if(text.length){
        $('<li>', {
            html: text,
            name: 'somename',
            id: 'someid' + $('.justList li').length // for the sake of unique ids in the example
        }).appendTo('ul.justList')
    }
});