Javascript jQuery函数不适用于附加的html

我想用jQuery附加一个div，然后在附加的div中的类上使用jQuery click函数。下面是我的代码，如果我附加div，它不起作用，但是如果div已经存在于html中，它就可以正常工作

HTML:

<div class="add">
    Add item
</div>

<div class="container">
</div>

$('.add').click(function(e){
    e.preventDefault();

    var box = '<div class="box"><div class="remove">x</div></div>'
    $('.container').append(box)
});


$('.remove').click(function(){
    alert("remove");
});

添加项

jQuery:

<div class="add">
    Add item
</div>

<div class="container">
</div>

$('.add').click(function(e){
    e.preventDefault();

    var box = '<div class="box"><div class="remove">x</div></div>'
    $('.container').append(box)
});


$('.remove').click(function(){
    alert("remove");
});

$（'.add'）。单击（函数（e）{
e、 预防默认值（）；
变量框='x'
$（'.container'）.append（框）
});
$（'.remove'）。单击（函数（）{
警报（“移除”）；
});

演示：

使用事件委派

$('.container').on('click','.remove',function(){
    alert("remove");
});

演示

-->

---

尝试使用

live

绑定事件，这将在创建新项目时绑定事件：

$('.add').live('click', function(e){

});

---

即使创建了图元，也必须绑定单击：

$('.add').click(function(e){
    e.preventDefault();

    var box = "<div class='box'><div class='remove'>x</div></div>"
    $('.container').append(box)

$('.remove').click(function(){
    alert("remove");
});


});

$（'.add'）。单击（函数（e）{
e、 预防默认值（）；
var box=“x”
$（'.container'）.append（框）
$（'.remove'）。单击（函数（）{
警报（“移除”）；
});
});

---

我可以使用$（'.remove'）。在（'click'，function（）{alert（“remove”）；}）；为什么，先生。这也是我们使用的。你能解释一下吗pls@user1251698，它可以工作，它只是登录到控制台，看看控制台上的控制台。我用console.log替换了alert。正如pXL的回答所示，你可以，但不必。我指的是你的措辞。此外，如果您添加多个项目，您将最终得到多个绑定（因为您将绑定到每个

。每次添加一个项目时都将删除
）。您应该直接绑定到您创建的box元素。