Question

我的html和javascript（使用jQuery）代码就在这里。我制作了一个更好的可视化片段，所以请看一下。我在片段下面描述了我的问题。

  $(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>

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

Answer 1

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

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

你这样写：

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

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

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

Answer 2

我觉得有必要指出你可能会得到closest, siblings兄弟姐妹。您也可以考虑是否希望遵守我的示例中的已选中/未选中状态。您也可以考虑使用更改而不是点击事件，因为值可能会被代码或其他方式更改。

此外，你有一个ID，可以使用MIGHT来快速访问，而不是使用ID="cca_item_id"等进行遍历。但它是无效的，因为$(function() { $('#qfdetails').on('change', '.move_to_choice2Checkbox', function() { if (this.checked) { var cca_item_id = $(this).closest('td') .siblings().first() .find('option:selected').eq(0).val(); console.log(cca_item_id); } }); });的副本会使你的HTML无效。< / p>

注意我保留了其他无效的HTML（其他重复的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_id1" 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_id2" 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_id3" 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>

 public inputValidator(event: any) {
    //console.log(event.target.value);
    const pattern = /^[a-zA-Z0-9]*$/;   
    //let inputChar = String.fromCharCode(event.charCode)
    if (!pattern.test(event.target.value)) {
      event.target.value = event.target.value.replace(/[^a-zA-Z0-9]/g, "");
      // invalid character, prevent input

    }
  }

     <input type="text" [(ngModel)]="abc.abc" (input)="inputValidator($event)" />

多个复选框更改函数与类名，但在javascript中相同的类名

2 个答案: