点击事件中的jquery调用函数导致不需要的函数多次调用答案

【问题标题】：jquery calling function in click event cause unwanted multiple calls of the function点击事件中的jquery调用函数导致不需要的函数多次调用
【发布时间】：2012-11-29 09:41:29
【问题描述】：

我遇到了以下问题。我尝试做的是每次单击 ID 为 #add_new_row 的按钮时创建一个新的 TR。单击事件添加一行，其中包含一个输入，其中包含 CLASS p_pocet。在任何点击之前，我会在每次页面加载时生成第一个 TR，所以我调用函数 countPolozky() 来为输入提供必要的 BLUR 函数。问题是这样的： 1）在第一页加载时，我单击页面上唯一的一个输入，然后我收到警报，提示我单击的行的输入值正确。 2）在我单击按钮添加新行后。 jquery 添加一个新行并再次调用函数 countPolozky()。（如果我不调用它，BLUR 函数只会对第一个 TR 的输入做出反应）。如果我点击新 TR 的输入，在我结束焦点后，我会再次收到正确的警报，但如果我点击第一个 TR，我会收到 2 个警报。我只想要一个警报来获取我单击的活动行的值。如果我添加其他行，警报只会成倍增加。

     ( function($) {
        $(document).ready(function() {

                    $("#add_new_row").click(function(){
                      var pocet = parseInt($("#tbl_rows_count").attr('value')) + 1;
                      $("#tbl_rows_count").val(pocet);
                      $("#add_new_row").before('<tr></td><td><input name="pocet[]" id="pocet'+                    pocet +'" class="polozky p_pocet" type="text" value="1.0"></td></tr>');
                      $(".add_news2").click(function(){
                          $(this).parents('tr').remove();
                      });
                      countPolozky();
                    });
                    countPolozky();
       });
    } ) 
( jQuery );

     function countPolozky()    
        {
            //$(".polozky").die("blur");
            $(".polozky").blur(function() {
                pocet = $(this).closest('tr').find('.p_pocet').val();
                alert(pocet);
            });    
        }

你可以在这里看到问题，它是一个开具发票的网站在表格的末尾有添加项目的输入，这就是问题所在。 http://www.vzor-faktury.cz/#vygenerovat-fakturu

【问题讨论】：

标签： jquery

【解决方案1】：

你有几个选择：

创建新元素时，仅将新事件处理程序绑定到新元素，而不是 .polozky 的所有内容。
使用事件委托。

事件委托允许您在容器对象（例如表格元素）上设置单个事件处理程序，该处理程序将处理表格内所有.polozky 元素的所有模糊事件。因此，您可以动态添加/修改/删除所有您想要的.polozky 元素，而无需绑定新的事件处理程序。

有几篇关于event delegation的帖子可以作为参考。

【讨论】：