为什么JQuery.live可以删除动态添加的项，而JQuery.on或.bind不能？

我听说JQuery.live已经被弃用，不应该再使用了。我在下面编写了一些示例代码，其中有一个id为adddiv的按钮，它将id为seconddiv的div附加到id为firstdiv的现有div

在seconddiv中，我有另一个id为delete的按钮，单击该按钮时，我想删除seconddiv。代码可以正常工作，但是如果我将捕获delete按钮的click事件的JQuery更改为使用.on或.bind，它将无法工作

谁能告诉我如何将此更改为使用.on或.bind以使其正常工作

HTML:

现有分部

Javascript:

<script type="text/javascript">
    $().ready(function () {

        $('#adddiv').click(function () {
            $('#firstdiv').append('<div id="seconddiv"> Click here to delete the second div: <input type="button" id="delete" value="Delete Div"></div>')
        });

        $('#delete').live('click', function (e) { 
            $(this).parent('#seconddiv').remove();
        });   
    });
</script>

$（）.ready（函数（）{
$（'#adddiv'）。单击（函数（）{
$（'#firstdiv'）。追加（'单击此处删除第二个div:'）
});
$（'#delete'）.live（'click'，函数（e）{
$（this）.parent（'#seconddiv'）.remove（）；
});   
});

的设置如下：

.on（事件[，选择器][，数据]，处理程序（事件对象））

基本上，您需要将其绑定到已经存在的选择器，因此在本例中，您可以使用以下选择器：

• $（document）.on（）

• $（'body'）.on（）

• $（'#firstdiv'）.on（）

---

接下来，您指定什么

事件

：

• $（文档）。单击（'click'）

• $（'body'）。单击（'click'）

• $（'firstdiv'）。点击（'click'）

注意：如果要绑定多个事件，请在事件之间添加空格：

$（文档）。在（'click mouseover'）

演示：

---

然后，你说哪些元素触发了事件：

• $（文档）。在（'单击'，'删除'）

• $（'body'）。在（'click'，'delete'）

• $（'firstdiv'）。在（'click'，'delete'）

注意：如果要绑定多个元素，请使用逗号：

$（文档）。在（'click'，'delete'，'delete2'）

演示：

---

最后，添加一个处理程序：

• $（文档）。在（'click'，'#delete'，function（）{}）上

• $（'body'）。在（'click'，'#delete'，function（）{}）上

• $（'#firstdiv'）。在（'click'，'#delete'，function（）{}）上

---

JAVASCRIPT:

 $().ready(function () {
    $('#adddiv').click(function () {
        $('#firstdiv').append('<div id="seconddiv"> Click here to delete the second div: <input type="button" id="delete" value="Delete Div"></div>')
    });

    $(document).on('click', '#delete', function(e) {
        $(this).parent('#seconddiv').remove();
    });   
});

$（）.ready（函数（）{
$（'#adddiv'）。单击（函数（）{
$（'#firstdiv'）。追加（'单击此处删除第二个div:'）
});
$（文档）。在（'单击'，'删除'）上，函数（e）{
$（this）.parent（'#seconddiv'）.remove（）；
});   
});

演示： 设置如下：

.on（事件[，选择器][，数据]，处理程序（事件对象））

基本上，您需要将其绑定到已经存在的选择器，因此在本例中，您可以使用以下选择器：

• $（document）.on（）

• $（'body'）.on（）

• $（'#firstdiv'）.on（）

---

接下来，您指定什么

事件

：

• $（文档）。单击（'click'）

• $（'body'）。单击（'click'）

• $（'firstdiv'）。点击（'click'）

注意：如果要绑定多个事件，请在事件之间添加空格：

$（文档）。在（'click mouseover'）

演示：

---

然后，你说哪些元素触发了事件：

• $（文档）。在（'单击'，'删除'）

• $（'body'）。在（'click'，'delete'）

• $（'firstdiv'）。在（'click'，'delete'）

注意：如果要绑定多个元素，请使用逗号：

$（文档）。在（'click'，'delete'，'delete2'）

演示：

---

最后，添加一个处理程序：

• $（文档）。在（'click'，'#delete'，function（）{}）上

• $（'body'）。在（'click'，'#delete'，function（）{}）上

• $（'#firstdiv'）。在（'click'，'#delete'，function（）{}）上

---

JAVASCRIPT:

 $().ready(function () {
    $('#adddiv').click(function () {
        $('#firstdiv').append('<div id="seconddiv"> Click here to delete the second div: <input type="button" id="delete" value="Delete Div"></div>')
    });

    $(document).on('click', '#delete', function(e) {
        $(this).parent('#seconddiv').remove();
    });   
});

$（）.ready（函数（）{
$（'#adddiv'）。单击（函数（）{
$（'#firstdiv'）。追加（'单击此处删除第二个div:'）
});
$（文档）。在（'单击'，'删除'）上，函数（e）{
$（this）.parent（'#seconddiv'）.remove（）；
});   
});

演示：

$（）.ready（函数（）{
$（'#adddiv'）。单击（函数（）{
$（'#firstdiv'）。追加（'单击此处删除第二个div:'）
});
$（'body'）。在（'click'，'#delete'，函数（e）{
$（this）.parent（'#seconddiv'）.remove（）；
});   
});

在

on

事件中，我将

body

作为事件处理程序，它可以是任何元素，只要它是您将调用的元素的父元素，在您的案例中是

#delete

。事件处理程序使用的DOM树越高，冒泡效果就越明显

然而，在选择事件处理程序时要记住的一点是，您必须确保它在DOM中可用，因此在这种情况下，使用

$（document）

作为事件处理程序总是安全的

请参见文档

$（）.ready（函数（）{
$（'#adddiv'）。单击（函数（）{
$（'#firstdiv'）。追加（'单击此处删除第二个div:'）
});
$（'body'）。在（'click'，'#delete'，函数（e）{
$（this）.parent（'#seconddiv'）.remove（）；
});   
});

在

on

事件中，我将

body

作为事件处理程序，它可以是任何元素，只要它是您将调用的元素的父元素，在您的案例中是

#delete

。事件处理程序使用的DOM树越高，冒泡效果就越明显<

 <script type="text/javascript">
    $().ready(function () {

        $('#adddiv').click(function () {
            $('#firstdiv').append('<div id="seconddiv"> Click here to delete the second div: <input type="button" id="delete" value="Delete Div"></div>')
        });

        $('body').on('click', '#delete', function (e) { 
            $(this).parent('#seconddiv').remove();
        });   
    });
</script>

<script type="text/javascript">

    // Event handler to delete a second div
    var onDelete = function (e) { 
        $(this).closest('#seconddiv').remove();
    };
    // Event handler to add a second div
    var onAdd = function () {
        // create div
        var div = $('<div/>', {
           id: 'seconDiv',
           text: 'Click here to delete the second div:'
        });
        // create button
        var button = $('<input/>', {
            id: 'delete',
            type: 'button',
            value: 'Delete Div'
        });
        // wrap them together and append
        div.append(button).appendTo('#firstDiv');
    };

    // Event binding .on(event, selector, handler)
    $(document).on('click', '#addiv', onAdd);
    $(document).on('click', '#delete', onDelete);
</script>