javascript - 如何防止 JavaScript 上的双重绑定(bind)？

Question

这是我的情况，我有一个可以动态添加/删除行的表，我需要在页面加载时绑定(bind)删除行。

这是我的代码:

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

但是当我在外部js上添加行时，我还需要绑定(bind)另一个removeRow

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

这样新添加的行也将与removeRow函数绑定(bind)，

这是我的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:当我先添加行然后删除已绑定(bind)在页面上的行时，对话框出现两次。

情况 3:当我删除添加的行时，它工作正常(对话框出现一次)。

(PS:仍在学习 JavaScript)

知道如何解决案例 2 吗？

Answer 1

添加一个委托(delegate)的事件处理程序，这样它将适用于现有元素和 future 的元素

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

将 document 替换为最接近的非动态父元素。