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
});
});
}
なぜ複数回呼び出されるのか、誰か教えてください。