jeditable（内联编辑器）不适用于动态生成的元素答案

【问题标题】：jeditable(inline editor) is not working for dynamically generated elementsjeditable（内联编辑器）不适用于动态生成的元素
【发布时间】：2012-07-30 13:25:17
【问题描述】：

生成动态元素的代码：

$(".add_entry").click(function(event) {
    id=event.target.id;
    var parent_id=($("#"+id+"").parent().get(0).id);
    var i=$("#"+parent_id+"_add").children().children().length;
    i=i+1;
    var content='<li id="'+parent_id+'_'+i+'"><div class="timelineUnit"><h4 class="click"        style="float:left;">Manager</h4><h4 style="float:right;"><span class="timelineDate   click">2010 - Present</span></h4><h5 class="click" style="clear:both;">Ligula Non Lectus</h5><p class="autogrow">Lorem ipsum dolor sit amet, consectetur adipiscingVivamus sit amet ligula non lectus cursus egestas. Cras erat lorem, fringilla quis sagittis in, sagittis inNam leo tortor Nam leo tortor Vivamus.</p></div></li>';
    $("#"+parent_id+"_add").append(content);
});

和可编辑的功能代码

$(function() {
    $(".click").editable("<?php echo HTTP_URL; ?>inline/php/assign.php", { 
        indicator : "<img src='<?php echo HTTP_URL; ?>inline/img/indicator.gif'>",
        tooltip   : "Click to edit...",
        style  : "inherit",
        submit    : 'Ok',
        cancel    : 'Cancel',
    });
});

上面的代码适用于 html 之类的 <span class="click" id="name2">test</span> 但不适用于动态生成的 html 表单 jquery（上述函数）。

【问题讨论】：

标签： jquery jeditable

【解决方案1】：

对于动态生成的元素，也需要在生成脚本中调用可编辑脚本。

这样替换你的代码：

    $(".add_entry").click(function(event) {
     id=event.target.id;
     var parent_id=($("#"+id+"").parent().get(0).id);
     var i=$("#"+parent_id+"_add").children().children().length;
     i=i+1;
     var content='<li id="'+parent_id+'_'+i+'"><div class="timelineUnit"><h4   class="click"        style="float:left;">Manager</h4><h4 style="float:right;"><span class="timelineDate   click">2010 - Present</span></h4><h5 class="click" style="clear:both;">Ligula Non Lectus</h5><p class="autogrow">Lorem ipsum dolor sit amet, consectetur adipiscingVivamus sit amet ligula non lectus cursus egestas. Cras erat lorem, fringilla quis sagittis in, sagittis inNam leo tortor Nam leo tortor Vivamus.</p></div></li>';
      $("#"+parent_id+"_add").append(content);


      $(".click").editable("<?php echo HTTP_URL; ?>inline/php/assign.php", { 
       indicator : "<img src='<?php echo HTTP_URL; ?>inline/img/indicator.gif'>",
       tooltip   : "Click to edit...",
       style  : "inherit",
       submit    : 'Ok',
       cancel    : 'Cancel',
      });



    });

【讨论】：

【解决方案2】：

绝不是一个 javascript 人，但有时会修补一下。

但是如果你在 DOM 中注入 html，你不需要用 .live 或 .on 来编写它吗？

【讨论】：