jQuery 1.9中的DOM更改后，事件无法启动 [英] Event fails to fire after DOM change in jQuery 1.9

问题描述

我正在尝试为用户输入编码取消按钮。双击该用户将可以编辑一个项目，而取消按钮将允许用户取消该操作。

双击部分代码功能很好，随着文本输入框出现，附带取消按钮。但是现在，由于DOM已经改变，jQuery不再选择新元素，因此当点击取消按钮时，事件不会被触发。为了说明，代码如下：

 < div id =main> 
< ul class =todoList> 
< li id =todo-1class =todo> 
< div class =text> New Todo Item。双击编辑
< / 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'））{
 //保存ToDo的当前值，以便我们可以
 //如果用户丢弃更改：
 
 currentTODO.data（'origText'，container.text（））; 
} else {
 //如果编辑框为已经打开：
 return false; 
} 
 
 $（'< input type =text>'）val（container.text（））。appendTo container.empty（））; 
 
 container.append（
'< div class =editTodo>'+ 
'< a class =cancelhref =＃>取消< / a>'+ 
'< / div>'）; 
 
}）; 
 
 //取消编辑链接：
 
 $（'。cancel'）。on（'click'，function（）{
 alert（oops ）; 
}）; 
  

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

因此，我的问题是如何绑定事件DOM改变后？非常感谢您

解决方案

在您的示例中，事件绑定到绑定时存在的控件，并匹配选择。如果您希望该操作适用于新创建的控件，则应将事件绑定到文档本身。因为它是最高级别的DOM元素，所以来自较低级别的所有事件将传播到它。

在第二个参数中，给出上下文，因此只有在事件从这个上下文中接收到的函数将触发。

  $（document）.on（'dblclick'，'.todo' function（）{
 $（this）.find（'a.edit'）。click（）; 
}）; 
  

我不会引用你的整个代码，但是你会得到这个想法。 p>

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

I am trying to code a cancel button for user input. The user will be able to edit an item after double-clicking on it and the cancel button will allow the user to cancel the action.

The double-clicking part of the code works great, as a text-input box appears with cancel button attached. But now since the DOM has changed, jQuery no longer select the new element, and therefore when the cancel button is clicked the event is not fired. To illustrate, the code are following:

<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");
});

Or here: http://jsfiddle.net/S7f83/42/

My question is therefore, how can I 'bind' the event after DOM has changed? Thank you very much

解决方案

In your example the events are bound to the controls which exist at the moment of binding, and match the selector. If you would like the actions to apply for newly created controls, you shall bind the event to the document itself. As it is the highest level DOM element, all the events from lower levels will propagate up to it.

At the second parameter you give the context, so only if the event is received from that context will the function fire.

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

I won't cite your whole code, but you will get the idea from this one.

Binding listeners to the document is encouraged as it doesn't create as many bindings as many controls you have, just one top level binding, which waits for events to propagate up on the DOM tree. More info on optimalization: http://24ways.org/2011/your-jquery-now-with-less-suck/

这篇关于jQuery 1.9中的DOM更改后，事件无法启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！