"click"监听器多次执行

Question

我正在尝试创建使用ajax创建行的表.问题是,当我根据类名分配"click"监听器时,它会被多次调用

我的代码是

function fn_getAlertRules(parentRowId) {
    $.ajax({
        type: "GET",
        url: anyURL,
        contentType: "application/json",
        dataType: "json"
    }).done(function(data) {
        // create row to add to parent table's row
        var s_rulesHtmlString = '<tr><td colspan="3" class="rules-parent-tr"><table><tbody>';
        $.each(data, function(i, name) {
        s_rulesHtmlString += '<tr class="rule-tr">';
        s_rulesHtmlString += '<td class="eventid-td">Rule ID:'+ name.RuleId+'<span>' + name.OccuredEventId + '</span></td>';
        s_rulesHtmlString += '<td>' + name.Name + '</td><td>' + name.RuleDate + '</td>';
        s_rulesHtmlString += '</tr>';
        });
        s_rulesHtmlString += '</tbody></table></td></tr>';
        // add row below parent tr
        $(parentRowId).parent().after(s_rulesHtmlString);
        $(".rule-tr").on("click", "td", function(event) {
            // this code blocks get executed multiple times
        });
    });
}

任何人都可以告诉我,为什么它被多次调用？

Answer 1

click您在每个（循环）中绑定事件，并且事件被绑定的次数与循环执行的次数一样，这就是为什么您会收到重复的单击事件。您可以将单击事件委托给要添加的元素的父级或document在 ajax 调用之前，事件将自动绑定到在完成函数中添加的动态添加的元素。您可以在此处阅读有关事件委托的更多信息

委派事件的优点是它们可以处理来自稍后添加到文档中的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。参考。

function fn_getAlertRules(parentRowId) {
    $(document).on("click", ".rule-tr td", function(event) {
       // this code blocks get executed multiple times 
    });

    $.ajax({
        type: "GET",
        url: anyURL,
        contentType: "application/json",
        dataType: "json"
    }).done(function(data) {
        // create row to add to parent table's row
        var s_rulesHtmlString = '<tr><td colspan="3" class="rules-parent-tr"><table><tbody>';
        $.each(data, function(i, name) {
        s_rulesHtmlString += '<tr class="rule-tr">';
        s_rulesHtmlString += '<td class="eventid-td">Rule ID:'+ name.RuleId+'<span>' + name.OccuredEventId + '</span></td>';
        s_rulesHtmlString += '<td>' + name.Name + '</td><td>' + name.RuleDate + '</td>';
        s_rulesHtmlString += '</tr>';
        });
        s_rulesHtmlString += '</tbody></table></td></tr>';
        // add row below parent tr
        $(parentRowId).parent().after(s_rulesHtmlString);       
    });
}