6

我正在尝试创建使用 ajax 创建行的表。问题是，当我根据类名分配“点击”侦听器时，它会被多次调用

我的代码是

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
        });
    });
}

谁能告诉我，为什么它被多次调用？

4

5 回答 5

2

那是因为您有多个表行，其中分配了相同的类。如果您只想为单击的项目执行它，请为其分配一个唯一的 id。

于 2013-04-17T07:20:12.150 回答
2

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

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

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);       
    });
}
于 2013-04-17T07:31:08.767 回答
1

我认为一个解决方案（也可以优化性能）是使用delegate。因此，您可以在父行（或表）上添加单个事件处理程序并根据event.target对象进行操作。

更新：此外，请注意选择器$(".rule-tr")将事件处理程序附加到具有不同 parent_id 的行，因此更好的解决方案可能是$(parent_Id + " .rule-tr")假设 parent_id 是表单中的字符串"#parent_id"

于 2013-04-17T07:31:02.820 回答
0

<tr>在 ajax 之后，仅将 on click 事件连接到最后一个

$(".rule-tr :last").on("click", "td", function(event) {
            // this code blocks get executed multiple times
        });
于 2013-04-17T07:30:46.697 回答
0

也许您可以尝试避免重复绑定单击事件

$(".rule-tr").unbind();
$(".rule-tr").on("click", "td", function(event) {
            // this code blocks get executed multiple times
        });
于 2017-04-28T01:02:47.917 回答