Question

我正在尝试删除动态创建的列。删除列的链接仅适用于第一列。当我按下第二列上的链接时，没有任何事情发生，但应该显示一条消息。

怎么了？

代码：

$(document).ready(function(){
  function deleteCol(currentNode){$(currentNode).remove();}
  function deleteRow(currentNode){$(currentNode).parent().parent().remove();}  
  $('.AddColBtn').click(function(){
      var colLength = $('tr.header th.col').length+1;
      var rowLength = $('.row').length;
      var vAddColc = $('.col').clone().html();
      var vAddColr = vAddColc.replace("Col 1","Col "+colLength);
      var vAddCol = '<th class="col">'+vAddColr+'</input></th>';
      var vAddCell = '<td class="href" onclick="document.location.href="#11">Cell '+colLength+'</td>';
      $('.ColAdd').before(vAddCol);
      $('.RowDel').before(vAddCell);
    });

  $('.AddNewRow').click(function(){
        var clonedRow = $('.row').clone().html();
        var rowLength = $('.row').length+1;
        var n = clonedRow.replace("Row 1","Row "+rowLength);
        var appendRow = '<tr class = "row">' + n + '</tr>';  
        $('#myPureTable tr:last').after(appendRow);
    });

 $("a.delCol").click(function(event) {
   event.preventDefault();
   var colCnt = $('tr.header th.col').length;
   alert(colCnt);
   //var current_cell = $(this).closest("td");
   //var nb_columns = current_cell.closest('table').find('tr:eq(1) td').length+1;
   //var column_to_delete = current_cell.prevAll("td").length+1;
    //if (colCnt>1){deleteCol('table tr td:nth-child('+(nb_columns+'n-'+(nb_columns-column_to_delete))+')');}

   //$('table tr td:nth-child('+(nb_columns+'n-'+(nb_columns-column_to_delete))+')').remove();
  });   

 $('.RowDelete').live('click',function(){
      var rowLength = $('.row').length;
      if(rowLength > 1){deleteRow(this);}
      else{$('.employmentHistoryForm tr:last').after(appendRow);
            deleteRow(this);}
 });
});

Fiddle

Answer 1

那是因为你没有考虑到你没有绑定到动态创建的元素的事实。

更改

 $("a.delCol").click(function(event) {

到

 $(document).on('click', "a.delCol", function(event) {

JQuery动态添加/删除列/行

1 个答案: