复选框更改事件触发两次

Question

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

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>

SELECTED SUBJECT CODE（从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。为什么？

Answer 1

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