动态表行未绑定

Question

这是我用来附加表格行的代码，其中personTabs是iframe名称

$(".addClass1").on('click',function() {
           parent.parent.parent.personTabs.$("#skilltableId").append(                        
                  '<tr id="skilltableId1"><td class="btnRemoving">'+$("#selecetedValue").val()+'</td><td class="editing">'+$("#type").val()+'</td><td style="display:none">'+$("#commonDbid").val()+'</td></tr><br>'                    
        );  

当我单击td class ='editing'时，我正在生成一个文本框，如下所示。

 parent.parent.parent.personTabs.$(".editing").on('click',function() {
                    var data = $(this).text();
                     $(this).html("<input type='text' id='focus123' value='"+data+"'/>").children().focus();
                      });

我第一次一切都好..表行被追加好..第二次我做相同的追加时，表行被生成。onclick仅适用于最后一个生成的行。 ..为什么会这样..anybdy在这里可以给我打电话，..我尝试了实时，委托方法..但是没有用..我正在使用jquery-1.9.1.js

Answer 1

我认为一个问题是您创建了一个具有相同ID的文本框。 我不确定您为什么使用parent.parent.parent ...

 $(".addClass1").on('click',function() {
           $("#skilltableId").append(                        
                  '<tr id="skilltableId1"><td class="btnRemoving">'+$("#selecetedValue").val()+'</td><td class="editing">'+$("#type").val()+'</td><td style="display:none">'+$("#commonDbid").val()+'</td></tr><br>'                    
        ); 

$(".editing").on('click',function() {
                var data = $(this).text();
                 $(this).html("<input type='text' class='focus123' value='"+data+"'/>").children().focus();
                  });

我不确定是否可以使用，但是您也可以使用此javascript函数

$(".addClass1").on('click', function () {
    $("#skilltableId").append('<tr id="skilltableId1"><td class="btnRemoving">' + $("#selecetedValue").val() + '</td><td class="editing" on click="myfunction(this)">' + $("#type").val() + '</td><td style="display:none">' + $("#commonDbid").val() + '</td></tr><br>');

    function myfunction(selectedTd) {
        var data = $(selectedTd).text();
        $(selectedTd).html("<input type='text' class='focus123' value='" + data + "'/>").children().focus();

    }
});