点击动态创建的编辑按钮不起作用

Question

我有这个jsfiddle其中有一个接受姓名，电子邮件和手机号码的形式。按下添加按钮后，新记录插入添加按钮下方以及2个引导图标编辑和删除。所以当点击编辑按钮时，它应该显示列值（这只发生在第2行），但是当新创建的记录单击编辑按钮时，它不显示任何东西。我能知道错误在哪里？

这是编辑按钮jQuery代码点击

$('.icon-edit').click(function() { 
     //alert("hi"); 
     $('#editReords').modal({show:true}) 
var $row = $(this).parents('tr'); 
var $columns = $row.find('td'); 
     //$columns.addClass('row-highlight'); 

     var values = ""; 
     jQuery.each($columns, function(i, item) { 
      values =item.innerHTML; 
      if(i==1){ 

       alert("name:"+values); 
       //document.getElementById("name1").value = values; 
      } 
      else if(i==2){ 
       alert("emailID:"+values); 
       //document.getElementById("date1").value = values; 
      } 
else if(i==3){ 
       alert("mobile:"+values); 
       //document.getElementById("StartTime1").value = values; 
      }}); 
    }); 
    $('#save').click(function() { 
//alert("data saved"); 
    }); 
//edit records 
    }); 

Answer 1

使用on()委托的情况下，因为元素动态添加：

$('.icon-edit').click(function() { 

应该改为：

$("#mytable").on('click', '.icon-edit', function() { 

JSFiddle

注意：您还可以使用delegate()此：

$("#mytable").delegate('.icon-edit', 'click', function() { 

JSFiddle

Answer 2

使用.on()

因为元素被添加动态不能直接事件绑定到他们。所以，你必须使用Event Delegation。

$('#mytable').on('click','.icon-edit',function() { ..//code here }) 

语法

$(elements).on(events, selector, data, handler); 

fiddle Demo

Answer 3

哦SRY！我做了一个错误的代码 使用这样的：

试试这个代码，请：

$('#mytable').on('click','.icon-edit',function() { 
     //alert("hi"); 
     $('#editReords').modal({show:true}) 
var $row = $(this).parents('tr'); 
var $columns = $row.find('td'); 
     //$columns.addClass('row-highlight'); 

     var values = ""; 
     jQuery.each($columns, function(i, item) { 
      values =item.innerHTML; 
      if(i==1){ 

       alert("name:"+values); 
       //document.getElementById("name1").value = values; 
      } 
      else if(i==2){ 
       alert("emailID:"+values); 
       //document.getElementById("date1").value = values; 
      } 
else if(i==3){ 
       alert("mobile:"+values); 
       //document.getElementById("StartTime1").value = values; 
      }}); 
    }); 
    $('#save').click(function() { 
//alert("data saved"); 
    }); 
//edit records 
    });