javascript - 复选框更改事件触发两次

我正在开发一个可以注册大学课程的应用程序。他们添加选择他们的注册类型，课程类型，批次及其主题。当他们选择课程类型以及批次时，我会将主题放在桌子上。因此他们可以选择主题，添加后将其放入所选主题表中。我的代码将在第一次使用时工作。但是突然之间，它们被更改了，它们是注册类型，课程类型和批次，它将列出主题。但是，当他们选择一个主题时，它将向所选主题表中添加两个表trs。这是为什么 ？

JQUERY

$("#subjectsTable").on('change', '.selectedSubjects', function (event) {
event.stopPropagation();
    var selectedReg = $('#CouserFinder option:selected').val();
    var selectedCouse = $('#CourseSet option:selected').val();
    var selectedBatch = $('#alreadyBatchSorting option:selected').val();

    if(selectedBatch != "Select Your Batch"){
    var shouldChecked = $("#CT_No_Of_SubjectsCount").val();

  var bol = $(".selectedSubjects:checkbox:checked").length >= shouldChecked;
  $(".selectedSubjects:checkbox").not(":checked").attr("disabled",bol);

    if ($(this).is(":checked")) {
        var indexChecked = $(this).closest("tr").attr("data-index");
        alert(indexChecked);
        var selectedSCode = $(this).closest("tr").find(".selectedSCode").text();
        $("#selectesSubjectsRecodes tr:last").after("<tr data-index=" + indexChecked + "><td>" + selectedReg + "</td><td>" + selectedCouse + "</td><td>" + selectedSCode + "</td><td>" + selectedBatch + "</td></tr>");


    } else {
        var indexAdded = $(this).closest("tr").attr("data-index");
        var findRow = $("#selectesSubjectsRecodes tr[data-index='" + indexAdded + "']");
        findRow.remove();

    }
}
else{
alert("Warning!: Select Your Batch");
$(this).prop('checked', false)
}
});

的HTML

<tr class="success" data-index="10">
<td>
<input class="selectedSubjects" type="checkbox" name="selectedSubjects">
</td>
<td class="selectedSCode">BCS-DIP-UID</td>
<td class="selectedSName">UID</td>
</tr>

选定的主题代码（从DOM中获取）

<tr data-index="10">
<td>BCS-DIP-S3</td>
<td>BCS-DIP</td>
<td>BCS-DIP-UID</td>
<td>BCS-DIP-APR/2014-002</td>
</tr>
<tr data-index="10">
<td>BCS-DIP-S3</td>
<td>BCS-DIP</td>
<td>BCS-DIP-UID</td>
<td>BCS-DIP-APR/2014-002</td>
</tr>

屏幕截图



如您所见，它将添加两个trs。为什么？

最佳答案

每次调用该函数时，都将一个新的事件处理程序绑定到$("#subjectsTable .selectedSubjects")。问题将源于您的JavaScript在一个函数中的事实，该函数被多次调用。