如何防止對JavaScript進行雙重綁定？

Question

這是我的情況，我有一個可以動態添加/刪除行的表，我需要在頁面加載時綁定刪除行。

這是我的代碼：

 <script type="text/javascript">
 $(document).ready(function(){ 
 $(".btnRemoveRow").bind("click", removeRow); });
 </script>

但當我在外部js上添加行時，我還需要綁定另一個removeRow

function addRow(){ 
{--add row code here--}
$(".btnRemoveRow").bind("click", removeRow); 
}

這樣新添加的行也將與removeRow函數綁定在一起，

這是我的removeRow函數：

function removeRow(){

var row = $(this).closest('tr');
var selected = row.find('input.qty,input.price,textarea,select').val();
$.getScript("calculate.js", function(){});

if(selected)
{
var r=confirm("Confirm Remove?");
if (r==true)
{

  row.find('input.qty,input.price,textarea,select').attr("disabled", true);
  row.find('input.hidden-deleted-id').val("yes");
  row.find('.subtotal>center>h3').text("0");
  calculate();

  row.hide();
  return false;
}
else
{
  return false;
} 
}

else{

  row.find('input.qty,input.price,textarea,select').attr("disabled", true);
  row.find('input.hidden-deleted-id').val("yes");
  row.find('.subtotal>center>h3').text("0");
  calculate();
  row.hide();
  return false; 
  }

  };

情況1：當我刪除行而不先添加任何行時，它工作正常（對話框僅出現一次）。

情況2：當我先添加行然后刪除准備好在頁面上綁定的行時，對話框出現兩次。

情況3：當我刪除添加的行時，它工作正常（對話框出現一次）。

（PS：仍在學習JavaScript）

知道如何解決第二號案件嗎？

Answer 1

添加一個委派的事件處理程序，這樣它將對現有元素和將來的元素起作用

<script type="text/javascript">
 $(document).ready(function(){ 
     $(document).on("click", ".btnRemoveRow", removeRow); 
 });
</script>

用最接近的非動態父元素替換document 。

Answer 2

嘗試這個：

<script type="text/javascript">
 $(function(){ 
   $(".btnRemoveRow").click(function(){removeRow();});
 });
 </script>