Detektor "kliknięcie" zostanie wykonany wielokrotnie

Question

Próbuję utworzyć tabelę, która tworzy wiersze przy użyciu ajax. problemem jest to, że kiedy przydzielony słuchacza „kliknąć” na podstawie nazwy klasy jest uzyskiwanie nazywany stwardnienie czas

mój kod jest

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

może ktoś proszę mi powiedzieć, dlaczego ona jest uzyskiwanie nazywany stwardnienie czas ?

Answer 1

Ty są wiążące click Zdarzenie w każdej (pętli) i zdarzenie jest wiązane tyle razy, ile wykonywana jest pętla, dlatego pojawiają się powtarzające się zdarzenia kliknięcia. Możesz przekazać zdarzenie kliknięcia rodzicowi elementów, które mają zostać dodane, lub document, zanim wywołanie ajax i zdarzenie zostaną automatycznie powiązane z dynamicznie dodawanym elementem dodawanym do zrobionej funkcji. Możesz przeczytać więcej o wydarzeniu za pomocą delegacji na here

delegowane wydarzenia mają tę zaletę, że można je przetwarzać zdarzenia z elementami potomnych, które są dodawane do dokumentu w późniejszym czasie. W przypadku wybierając element, który jest gwarantowany w chwili dołączenia wydanego delegowanego programu obsługi zdarzeń , można zastosować delegowane zdarzenia do , unikając konieczności częstego dołączania i usuwania programów obsługi zdarzeń. Reference.

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

Answer 2

Dzieje się tak dlatego, że masz wiele wierszy tabeli z przypisaną tą samą klasą. Jeśli chcesz, aby została wykonana tylko dla klikniętego elementu, przypisz mu unikalny identyfikator.

Answer 3

Podłączyć na kliknij zdarzenie tylko ostatniego <tr> po ajax

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

Answer 4

myślę rozwiązanie (że wydajność Optymalizacja też) jest użycie delegation. Możesz więc dodać jedną procedurę obsługi zdarzeń do wiersza (lub tabeli) rodzica i postępować w zależności od obiektu event.target.

UPDATE: Ponadto należy zachować ostrożność, że selektor $(".rule-tr") dołączyć obsługi zdarzeń nawet do wierszy o różnej parent_id więc lepszym rozwiązaniem mogłoby być $(parent_Id + " .rule-tr") przy założeniu parent_id jest ciąg w postaci "#parent_id"

Answer 5

Może spróbować uniknąć powtarzania powiązać zdarzenie click

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