javascript - 事件委托(delegate)不适用于动态 li

Question

这个问题已经有答案了:

Events triggered by dynamically generated element are not captured by event handler (5 个回答)

已关闭 9 年前。

我有我的li，它有编辑名称的选项。但每次动态添加新元素时，我都不能不更改名称。改名的 Action 不火。

这样我的代码。我在 jquery 文档中阅读了有关 event delegation 的内容我认为这是解决这个问题的最佳方法，但我以错误的方式实现它。知道怎么样吗？

这是我所拥有的演示:http://jsfiddle.net/DiegoTc/vK588/10/

<li id="cZero" class="active">
 <a href="#tab_preview" data-toggle="pill">
  <span  class="display edit_text">Preview Card</span>
   <input type="text" class="edit" style="display:none"/>
 </a>
</li>

$(".edit_text").on('dblclick', function(event){
    event.preventDefault(event);
    $(this).hide().siblings(".edit").show().val($(this).text()).focus();
});

$(".edit").focusout(function(){
    $(this).hide().siblings(".display").show().text($(this).val());
});

Answer 1

您误解了如何使用 on() 进行委托(delegate)。当代码运行时，第一个选择器(在 on() 之前)必须存在。您使用另一个参数来传入目标选择器。

尝试

$(document).on('dblclick','.edit_text',function(event){
    event.preventDefault(event);
    $(this).hide().siblings(".edit").show().val($(this).text()).focus();
});

更彻底地阅读文档，因为 on() 有 2 个用例