0

我正在尝试为用户输入编写一个取消按钮。用户可以在双击项目后对其进行编辑，并且取消按钮将允许用户取消操作。

代码的双击部分效果很好，因为出现了一个带有取消按钮的文本输入框。但是现在由于 DOM 发生了变化，jQuery 不再选择新元素，因此当单击取消按钮时，不会触发事件。为了说明，代码如下：

<div id="main">
<ul class="todoList">
    <li id="todo-1" class="todo">
        <div class="text">New Todo Item. Doubleclick to Edit
         </div>
        <div class="actions"> <a href="#" class="edit">Edit</a></div>
    </li>
</ul>
</div>

var currentTODO;
$('.todo').on('dblclick', function () {
    $(this).find('a.edit').click();
});

$('.todo a').on('click', function (e) {
    e.preventDefault();
    currentTODO = $(this).closest('.todo');
});

$('.todo a.edit').on('click', function () {

    var container = currentTODO.find('.text');

    if (!currentTODO.data('origText')) {
        // Saving the current value of the ToDo so we can
        // restore it later if the user discards the changes:

        currentTODO.data('origText', container.text());
    } else {
        // This will block the edit button if the edit box is already open:
        return false;
    }

    $('<input type="text">').val(container.text()).appendTo(container.empty());

    container.append(
        '<div class="editTodo">' +
        '<a class="cancel" href="#">Cancel</a>' +
        '</div>');

});

// The cancel edit link:

$('.cancel').on('click', function () {
    alert("oops");
});

或在这里：http: //jsfiddle.net/S7f83/42/

因此，我的问题是，如何在 DOM 更改后“绑定”事件？非常感谢

4

3 回答 3

4

在您的示例中，事件绑定到绑定时存在的控件，并与选择器匹配。如果您希望将操作应用于新创建的控件，则应将事件绑定到document自身。由于它是最高级别的 DOM 元素，因此来自较低级别的所有事件都会向上传播。

在第二个参数中，您提供了上下文，因此只有从该上下文接收到事件才会触发该函数。

$(document).on('dblclick', '.todo', function () {
    $(this).find('a.edit').click();
});

我不会引用你的整个代码，但你会从这个中得到想法。

鼓励将侦听器绑定到文档，因为它不会创建与您拥有的控件一样多的绑定，只是一个顶级绑定，它等待事件在 DOM 树上传播。有关优化的更多信息：http: //24ways.org/2011/your-jquery-now-with-less-suck/

于 2013-04-19T22:04:32.503 回答
0

利用

$('.todo').on('click', '.cancel', function () {
    alert("oops");
});

因此您将事件委托给现有元素（the.todo）

代替

$('.cancel').on('click', function () {
    alert("oops");
});
于 2013-04-19T22:09:59.700 回答
0

2种方法

在第二种情况下，我将事件委托绑定到最近的父级，因此事件不需要冒泡到要执行的文档元素。这可以提高一些性能。是否要将取消按钮放置在其他任何位置取决于使用情况。

编辑：每个 li 都有不同的 id，所以最好附加到班级.todo

$('.todo').on('click', 'a.cancel', function () { alert("oops"); });

于 2013-04-19T22:17:15.110 回答