Geek asks and answers

"click" listener gets executed several times

I am trying to create a table that creates rows using ajax. the problem is that when I assigned a click listener based on the class name, it gets multiple times

my code

function fn_getAlertRules(parentRowId) {
    $.ajax({
        type: "GET",
        url: anyURL,
        contentType: "application/json",
        dataType: "json"
    }).done(function(data) {
        // create row to add to parent table 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
        });
    });
}

Can someone please tell me why it is called several times?

+5
source share
5 answers

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

, , . , , , .

+2

, ( ) delegation. , ( ) event.target.

UPDATE: Also, be careful that the selector $(".rule-tr")adds an event handler even to rows that have a different parent_id, so a better solution would be $(parent_Id + " .rule-tr")if parent_id is a string in the form"#parent_id"

+1
source

Connect on click event to last <tr>only after ajax

$(".rule-tr :last").on("click", "td", function(event) {
            // this code blocks get executed multiple times
        });
0
source

Perhaps you can try to avoid re-binding the click event

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

More articles:


All Articles