Question

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

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

任何人都可以告诉我如何更改此选项以使用.on或.bind来实现此功能吗？

HTML：

<div id="firstdiv">
Pre Existing Div
<input type="button" id="adddiv" value="Add Div" />
</div>

使用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>

Answer 1

jQuery's .on()设置如下：
.on( events [, selector ] [, data ], handler(eventObject) )。

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

$(document).on()
$('body').on()
$('#firstdiv').on()

接下来，指定event：

$(document).on('click')
$('body').on('click')
$('#firstdiv').on('click')

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

$(document).on('click mouseover')

样本： http://jsfiddle.net/dirtyd77/uBuH7/1/

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

$(document).on('click', '#delete')
$('body').on('click', '#delete')
$('#firstdiv').on('click', '#delete')

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

$(document).on('click', '#delete, #delete2')

DEMO：http://jsfiddle.net/dirtyd77/uBuH7/2/

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

$(document).on('click', '#delete', function(){ })
$('body').on('click', '#delete', function(){ })
$('#firstdiv').on('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();
    });   
});

样本： http://jsfiddle.net/dirtyd77/uBuH7/

Answer 2

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

在on事件中，我将body作为事件处理程序，这可以是任何元素，只要它为您将调用的元素提供父项，在您的情况下{{1} }。用于事件处理程序的DOM树越远，冒泡效果就越大。

在选择事件处理程序时要记住的一件事是，您必须确保它在DOM中可用，因此在这种情况下，使用#delete作为事件处理程序始终是安全的

请参阅jQuery $(document)文档here

Answer 3

我想改变一些事情：

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

使用.on()时，只要绑定事件时DOM中存在第一个选择器，就不需要$().ready()。因此$(document)选择器。简化代码。
如果您使用.on()，请尝试坚持使用它。同时使用.on('click'..)和.click()会让人感到麻烦和混乱。
混合html和javascript是混乱的，那么为什么不用jQuery方式构造html元素呢？在尝试找出刚刚创建的元素的属性时，可以避免水平滚动。此外，即使在将元素注入dom之前，您也可以轻松获得完整的jQuery支持
使用.closest()代替.parent()可以在不破坏代码的情况下进行小的html更改。
当然使用.on()代替弃用的.live()是一个好主意。
我也想分开事件绑定和处理。将所有事件绑定器紧密堆叠在一起，可以更容易地确定文档中存在哪些事件。

为什么JQuery .live可以删除动态添加的项目，但JQuery .on或.bind不支持？

3 个答案: