javascript - 具有类名的多个复选框更改功能，但 JavaScript 中的类名相同

Question

我的 html 和 javascript(带有 jQ​​uery)代码在这里。 我做了一个片段以更好地可视化，所以请看一下。我在代码片段下面描述了我的问题。

  $(document).ready(function(){
     $('.move_to_choice2Checkbox').click(function (){
    var cca_item_id = $(this).closest('tr').find('td option:selected').eq(0).val();
    console.log(cca_item_id);
    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<TABLE ID="qfdetails">
       <TBODY>
       <TR>
          <TD CLASS="col-lg-3">CCA Items</TD>
          <TD CLASS="col-lg-3">Year Groups</TD>
          <TD CLASS="col-lg-4">CCA Teacher</TD>
          <TD CLASS="col-lg-3" /> 
       </TR>
       <TR>
          <TD DATA-ID="0"> 
             <SELECT CLASS="form-control" ID="cca_item_id" NAME="choice1[]">
                <OPTION VALUE="">Please Select</OPTION> 
                <OPTION VALUE="4">Drawing</OPTION> 
                <OPTION VALUE="5">Swimming</OPTION> 
             </SELECT>
          </TD>
          <TD> 
             <SELECT CLASS="form-control tokenize-demo" ID="year_groups"
                     MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
                <OPTION VALUE="">Please Select</OPTION> 
                <OPTION VALUE="1">STD I - A</OPTION> 
                <OPTION VALUE="2">STD II - B</OPTION> 
             </SELECT>
          </TD>
          <TD> 
             <SELECT CLASS="form-control tokenize-demo" ID="teacher_emails"
                     MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
                <OPTION VALUE="">Please Select</OPTION> 
                <OPTION VALUE="xx.s@example.com">xyz</OPTION> 
             </SELECT>
          </TD>
          <TD> 
             <INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox"> 
          </TD>
       </TR>
       <TR>
          <TD DATA-ID="0"> 
             <SELECT CLASS="form-control" ID="cca_item_id" NAME="choice1[]">
                <OPTION VALUE="">Please Select</OPTION> 
                <OPTION VALUE="4">Drawing</OPTION> 
                <OPTION VALUE="5">Swimming</OPTION> 
             </SELECT>
          </TD>
          <TD> 
             <SELECT CLASS="form-control tokenize-demo" ID="year_groups"
                     MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
                <OPTION VALUE="">Please Select</OPTION> 
                <OPTION VALUE="1">STD I - A</OPTION> 
                <OPTION VALUE="2">STD II - B</OPTION> 
             </SELECT>
          </TD>
          <TD> 
             <SELECT CLASS="form-control tokenize-demo" ID="teacher_emails"
                     MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
                <OPTION VALUE="">Please Select</OPTION> 
                <OPTION VALUE="xx.s@example.com">xyz</OPTION> 
             </SELECT>
          </TD>
          <TD> 
             <INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox"> 
          </TD>
       </TR>
       <TR>
          <TD DATA-ID="0"> 
             <SELECT CLASS="form-control" ID="cca_item_id" NAME="choice1[]">
                <OPTION VALUE="">Please Select</OPTION> 
                <OPTION VALUE="4">Drawing</OPTION> 
                <OPTION VALUE="5">Swimming</OPTION> 
             </SELECT>
          </TD>
          <TD> 
             <SELECT CLASS="form-control tokenize-demo" ID="year_groups"
                     MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
                <OPTION VALUE="">Please Select</OPTION> 
                <OPTION VALUE="1">STD I - A</OPTION> 
                <OPTION VALUE="2">STD II - B</OPTION> 
             </SELECT>
          </TD>
          <TD> 
             <SELECT CLASS="form-control tokenize-demo" ID="teacher_emails"
                     MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
                <OPTION VALUE="">Please Select</OPTION> 
                <OPTION VALUE="xx.s@example.com">xyz</OPTION> 
             </SELECT>
          </TD>
          <TD> 
             <INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox"> 
          </TD>
       </TR>
       </TBODY>
    </TABLE>

但是，此代码仅适用于第一个复选框。当我单击第二个和第三个复选框时，它不返回任何内容或未在单击函数中输入。这是怎么回事，这 3 个复选框具有相同的类名。 请帮我。

Answer 1

如果在声明“click”处理程序后动态添加后续复选框，则事件将不会绑定(bind)到它们，因为执行该代码时它们不存在。

对此的一个解决方案是使用 jQuery 提供的“委托(delegate)事件”模式。只需将事件绑定(bind)到 DOM 上方的一个元素，该元素在单击处理程序执行时保证存在，然后将您实际想要响应该事件的元素(可能是动态创建的)的选择器传递给它。然后，当单击更高级别元素中的任何内容时，jQuery 会负责检查与选择器匹配的新元素，并专门为它们触发单击事件。

你可以这样写:

$("#qfdetails").on("click", ".move_to_choice2Checkbox", function () {

在这种情况下，要使用的最接近的逻辑高级元素是表，但如果元素没有其他共同祖先，则可以使用 document。理想情况下，您应该使用最接近的共同祖先，因为这更有利于性能。

有关更多详细信息，请参阅 http://api.jquery.com/on/ ，特别是标题为“直接和委托(delegate)事件”的部分。