Javascript 事件委派不处理动态li

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

以这种方式使用我的代码。我在jquery文档中读到关于我认为这是解决这个问题的最好方法，但是我用错误的方法实现了它。知道怎么回事吗

这是我的演示：

$（“.edit_text”）.on（'dblclick'，函数（事件）{
事件。预防违约（事件）；
$（this.hide（）.sides（“.edit”）.show（）.val（$（this.text（））.focus（）；
});
$（“.edit”）.focusout（函数（）{
$（this.hide（）.sides（“.display”）.show（）.text（$（this.val（））；
});

您误解了如何使用

on（）

进行委派。代码运行时，必须存在第一个选择器（在（）上的

之前）。您可以使用另一个参数传入目标选择器

试一试

请更彻底地阅读文档，因为（）上有两个使用案例
on
，它可能不起作用，因为您没有使用事件委派。再次阅读文章（您编写的代码看起来与使用
//附加直接绑定事件
注释的示例完全相同，而不是使用
//附加委派事件
注释的示例）。
<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());
});

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