2

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

在 seconddiv 中，我有另一个按钮，其 id 为删除，单击该按钮时，我想删除 seconddiv。代码按原样工作正常，但是如果我将捕获删除按钮的单击事件的 JQuery 更改为使用 .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>
4

3 回答 3

4

jQuery 的.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')

演示：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/

于 2013-02-28T19:07:13.013 回答
0 
 <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其作为事件处理程序，它可以是任何元素，只要它是您将要调用的元素的父元素，在您的情况下是#delete. 用于事件处理程序的 DOM 树越靠前，冒泡效果就越远。

但是，在选择事件处理程序时要记住的一件事是，您必须确保它在 DOM 中可用，因此在这种情况下，将其$(document)用作事件处理程序始终是安全的。

请参阅此处的 jQueryon文档

于 2013-02-28T19:07:25.503 回答
0

我想改变很多事情：

<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>
  1. 使用 时，只要绑定事件时 DOM 中存在第一个选择器.on()，就不需要。$().ready()因此$(document)选择器。简化代码。
  2. 如果您使用.on()，请尝试坚持使用它。使用.on('click'..)and.click()是混乱和混乱的。
  3. 混合 html 和 javascript 很麻烦，那么为什么不使用 jQuery 方式构造 html 元素呢？在尝试找出刚刚创建的元素的属性时，可以避免水平滚动。另外，即使在您将元素注入 dom 之前，您也可以轻松获得完整的 jQuery 支持
  4. 使用.closest()而不是.parent()允许在不破坏代码的情况下对 html 进行较小的更改。
  5. 当然，使用.on()而不是弃用.live()是一个好主意。
  6. 我也喜欢将事件绑定和处理分开。将所有事件绑定器紧密堆叠在一起，可以更轻松地确定文档中存在哪些事件。
于 2013-02-28T19:59:11.367 回答