CODEWITHSUNDEEP
javascriptjqueryjquery-ui
sree
sree

Reputation: 535

Dynamic Table row not binding

This is the code which i use to append table row,where personTabs is the iframe name

$(".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>'                    
        );

when i click td class='editing', i am generating a textbox as follows..

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

I am getting everything fine for the first time..the table row is been appended fine..when i do the same append for the second time,table row is generated.onclick working only for the last generated row..but not previous one..why is it so..anybdy here can tel me,..i tried live,delegate methods..but none worked..i am using jquery-1.9.1.js

Upvotes: 0

Views: 246

Answers (1)

Mohammad Ismail Khan
Mohammad Ismail Khan

Reputation: 651

I think one problem is that you have created a text box with the same id. I am not sure why you used 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();
                  });

I am not sure if it will work or not, but you can also use this javascript function

$(".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();

    }
});

Upvotes: 1

Related Questions