Jquery Event binding on newly cloned rows

Question

I have been working on a functionality where, i need to implement auto save on each cell of a table and also, add a new row if that cell is the last cell of the last row. The newly cloned row should also have the same binded blur events. I am able to add the new row but the event are not getting triggered. Here is the code.. Please help stuck for long now..

$("#myTable1").live("blur", function(){
         var elementValue = document.getElementById("<%=count%>").value.toString();
         var value = $("#<%=count%>_hidden").attr('value').toString();
         var qualValue = "<%=qualValue %>";
    var sequenceNumber = "<%=sequenceNumber %>";
    var parentAttrbtInstId = "<%=parentAttrbtInstId %>";
    var parentId = "<%=parentId %>";
    var attrbtId = "<%=attrbtId %>";
    var attrbtInstId =  $("#<%=count%>_hidden").attr('attrbtInstId').toString();
    var rootId = "<%=rootId %>";
    var itemId = "<%=item.getItemId()%>";
    var currentCount = "<%=count%>";
    var cellCount = "<%=cellLimit%>";
    var rowId = "row_<%=rowCounter%>";
    var rowCount = <%=rowCounter%>;



      if(elementValue.toLowerCase() != value.toLowerCase()){
         $.ajax({
           url: "<portlet:resourceURL id='autoSaveAction' />",
             type: 'POST',
             dataType: 'json',
             data: { elementValue:elementValue,qualValue:qualValue,sequenceNumber:sequenceNumber,parentAttrbtInstId:parentAttrbtInstId,parentId:parentId,attrbtId:attrbtId,
              attrbtInstId:attrbtInstId,rootId:rootId,itemId:itemId},
             success : function(response) {
                 if (response.status == "SUCCESS") {
                    jsonstr=JSON.stringify(response.result);
 var temp=JSON.parse(jsonstr);
 $("#<%=count%>_hidden").attr('attrbtInstId',temp.attrInstId);
 document.getElementById("<%=count%>_hidden").value = temp.attrValue;
 if(currentCount == cellCount){
 cloneRow = $("#myTable1 tr:last").clone(true);

     cloneRow.attr({
       'id': function(_, id) { 
 return "row_"+(rowCount+1);
       }            
     }).end().appendTo("#myTable1");

 cloneRow.find("input").each(function() {
     $(this).attr({
       'id': function(_, id) { 
 if (id.indexOf("hidden")!= -1){
 return currentCount + "_hidden";
 }else{
        return ++currentCount;
 }
       }             
     });
   }).end().appendTo("#myTable1");
 cloneRow.find("select").each(function() {
     $(this).attr({
       'id': function(_, id) {
       if (id.indexOf("hidden")!= -1){
 return currentCount + "_hidden";
 }else{
        return ++currentCount;
 }
 }              
     });
   }).end().appendTo("#myTable1");
 cloneRow.find("textarea").each(function() {
     $(this).attr({
       'id': function(_, id) {
        if (id.indexOf("hidden")!= -1){
 return currentCount + "_hidden";
 }else{
        return ++currentCount;
 } 
       }              
     });
   }).end().appendTo("#myTable1");
 }

 } else {
      }
      },
     error:function (xhr, ajaxOptions, thrownError){ 

     }
         });
          }
     });
         }); 

Answer 1

If you want all of the elements in the table to have the listener you first need to give them all a class, (like "table-elem"), and attach a listener like this:

   $("#myTable1").on("blur", ".table-elem", function() {

        //your function you want to run
   });