HTML + Jquery：表+添加/刪除行按鈕：帶綁定的pb

我創建了一個簡單的表格+添加行按鈕。進入每一個新的，我創建一個刪除按鈕。我的問題是，我不能綁定'刪除'類'點擊'事件。下面是簡化的代碼：HTML + Jquery：表+添加/刪除行按鈕：帶綁定的pb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script> 
    $(function() { 
     $('#btnAdd').bind('click', function() { 
      $('#myTable').append('<tr><td>'+ 
           '</td><td>'+ 
           '<button type="button" class="remove">DEL</button>'+ 
           '</td></tr>'); 
     }); 
     $('.remove').bind('click', function() { 
      $(this).parent().parent().remove(); 
     }); 
    }); 
</script>

這裏是HTML代碼：

<html> 
    <button class="" type="button" id="btnAdd">+</button> 
<table id="myTable"> 
    <thead> 
     <tr> 
      <th> 
       Something 
      </th> 
      <th> 
       Buttons 
      </th> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

如果我創建一個行成HTML代碼中，（ '卸下襬臂'）。綁定的作品，但它不起作用，如果該行是用.append方法創建的。

我試着用.on（）代替.bind，結果是一樣的。我用替換.bind .live，它可以工作，但.live已棄用。目前，因爲我需要繼續，所以我放置了$（'。remove'）。bind（...）;指令緊跟在.append指令之後。所以每次我插入一條新線，我都會綁定。它有效，但在我看來，它是一種錯誤的方法（因爲我綁定了一個類而不是一個Id）。

有人能點燃我的蠟燭嗎？謝謝

來源

2014-02-11 user2995748

問題是因爲你的.remove。在DOM被加載後追加按鈕，所以你需要使用委託事件處理程序。試試這個：

$('#myTable').on('click', '.remove', function() { 
    $(this).closest('tr').remove(); 
});

還要注意使用on超過bind和closest而不是鏈接parent選擇更好的可維護性。

來源

2014-02-11 08:05:18

這完全是我所需要的！完善。 – user2995748

您可以在元素上直接做一個綁定創建時，是這樣的：

$(function() { 
     $('#btnAdd').bind('click', function() { 
      var newRow = '<tr><td>'+ 
           '</td><td>'+ 
           '<button type="button" class="remove">DEL</button>'+ 
           '</td></tr>';      

      function handler() { alert('DEL pressed!'); } 

      $('#myTable').append(function() { 
         return $(newRow).click(handler); 
       }) 

     }); 
});

希望它能幫助。

來源

2014-02-11 08:20:53 IoviX

HTML + Jquery：表+添加/刪除行按鈕：帶綁定的pb

回答

相關問題