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

Question

My html and javascript (with jQuery) code is here. I made a snippet to better visualization, so please take a look. I describe my problem below the snippet.

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

But, this code is worked for first checkbox only. When I clicked on the second and third checkbox it returns nothing or not entered in click function. What's wrong on this, these 3 checkboxes having same class name. Please help me.

Answer 1

If the subsequent checkboxes are added dynamically, after your "click" handler is declared, then the event will not get bound to them, because they did not exist when that code was executed.

One solution to this is to use the "delegated events" pattern provided by jQuery. Simply you bind the event to an element higher up the DOM which is guaranteed to exist when the click handler executes, but then pass it the selector of the (potentially dynamically created) elements you actually want to respond to the event. Then when anything within the higher-level element is clicked on, jQuery takes care of checking for new elements matching the selector and triggering a click event for them specifically instead.

You write it like this:

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

In this case the nearest logical higher-level element to use is the table, but you can use document if there's no other common ancestor for your elements. Ideally you should use the closest common ancestor as this is better for performance.

For more details see http://api.jquery.com/on/ , specifically the section entitled "Direct and delegated events".

Answer 2

I feel compelled to point out that you might get the td siblings instead. You may also consider if you wish to honor the checked/unchecked state as in my example. You may also consider using the change instead of click event since values MIGHT be altered by code or other ways.

Also, you have an ids there that MIGHT have been used for faster access than traversing using the closest, siblings etc. BUT it is invalid as there are duplicates of ID="cca_item_id" which makes your HTML invalid.

Note I left the OTHER invalid HTML in place (other duplicate id's) - consider classes instead and use those to select.

 $(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); } }); }); 

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