为什么选择字段不显示？

Question

I'm trying to add select field by both ways first is dynamically and giving values to select fields. while trying with dynamically so it is working well. but when trying to display some select field by giving value to '1st room child' select field so first time im receiving the output but second time its doesn't worked

$(function () {
    /*here my values to increment whenever added newly form */
    var i = 1;
    i++;
    var max_fields = 6;
    var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
    var this_is_field_wrapper = $(".this_is_field_wrapper");


    //here we starting counting...
    var input_count = 1;
    //add buttong dynamically over here...
    $(this_button_work_for_click_to_add_rooms).click(function (event) {
        /* Act on the event */
        if (input_count < max_fields) {
            input_count++;
            var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults[]" name="selected_adults[]" class="form-control"><option   value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>' + input_count + ' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs[]" name="selected_childs[]" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col"  value="1">1</option><option id="second_child_col"  value="2">2</option></select></div><!-- </div><div class="form-group"> --><div id="childage0" class="col-xs-1"><h6></h6></div><div id="childage1" class="col-xs-1"><h6></h6></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
            $(this_is_field_wrapper).append(add_fields);
        }
    });
    $(this_is_field_wrapper).on('click', '.remove_input_button', function (e) {
        e.preventDefault();
        $(this).parent('div').remove();
        input_count--;
    });
});
function addFields() {
    var number = document.getElementById("selected_childs[]").value;
    var childage = document.getElementById("childage0");

    //Create array of options to be added
    var array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];

    while (childage.hasChildNodes()) {
        childage.removeChild(childage.lastChild);
    }
    if (number == 1) {
        // statement
        for (i = 0; i < number; i++) {
            var h = document.createElement("h6");
            h.setAttribute("id", "firstever");
            var h1 = document.createElement("h6");
            h1.appendChild(document.createTextNode("select child age"));
            childage.appendChild(h1);

            h.appendChild(document.createTextNode("Children Age " + (i + 1)));
            childage.appendChild(h);

            var selectList = document.createElement("select");
            selectList.setAttribute("id", "mySelect");
            selectList.setAttribute("class", "form-control");
            childage.appendChild(selectList);
            childage.appendChild(document.createElement("br"));

            //Create and append the options
            for (var j = 0; j < array.length; j++) {
                var option = document.createElement("option");
                option.setAttribute("value", array[j]);
                option.text = array[j];
                selectList.appendChild(option);
            }
        }
    } else {
        // statement
        for (i = 0; i < number; i++) {
            childage = document.getElementById("childage" + i);
            var h1 = document.createElement("h6");
            h1.setAttribute("id", "secondever");
            h1.appendChild(document.createTextNode("select child age"));
            childage.appendChild(h1);
            var h = document.createElement("h6");
            h.appendChild(document.createTextNode("Children Age " + (i + 1)));
            childage.appendChild(h);

            var selectList = document.createElement("select");
            selectList.setAttribute("id", "mySelect");
            selectList.setAttribute("class", "form-control");
            childage.appendChild(selectList);
            childage.appendChild(document.createElement("br"));

            //Create and append the options
            for (var j = 0; j < array.length; j++) {
                var option = document.createElement("option");
                option.setAttribute("value", array[j]);
                option.text = array[j];
                selectList.appendChild(option);
            }
        }

    }
}

<!DOCTYPE html>
<html>
   <head>
      <title>Welcome|Home</title>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <form method="POST" action="<?php echo base_url(); ?>index.php/dynamically_added_controller/Dynamically/addingValues">
         <div class="this_is_field_wrapper">
            <div class="row">
               <div class="form-group">
                  <div class="col-xs-1">
                     <h6>Options -</h6>
                     <h6 class="#">Adults(12+)</h6>
                     <select id="selected_adults[]" name="selected_adults[]" class="form-control">
                        <option   value="1">1</option>
                        <option selected="selected" value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                     </select>
                  </div>
                  <div class="col-xs-1">
                     <h6>1st Room</h6>
                     <h6 class="m_label">Child(0-12)</h6>
                     <select id="selected_childs[]" name="selected_childs[]" value="" onchange="addFields()" class="form-control">
                        <option>--select--</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                     </select>
                  </div>
                  <div id="childage0" class="col-xs-1">
                     <h6></h6>
                  </div>
                  <div id="childage1" class="col-xs-1">
                     <h6></h6>
                  </div>
                  <div class="col-xs-1">
                     <a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>                      
                  </div>
               </div>
            </div>
         </div>
         <button type="submit" value="submit">click to submit</button>
      </form>
   </body>
</html>

As you have seen the problem is while attempting second time to display select field by giving value to '1st room child' select field so it is not working.

</div>

Answer 1

Your problem is something called "delegation." When you dynamically add something to the DOM that wasn't there when it was first loaded, you have to look through a pre-existing parent first.

Consider this. You have an existing element: <div id="loaded"></div>

Then, you dynamically add something in that div: <button type="button" id="someButton">

In order to get to listen for that click, you have to go through the parent div since it's an original part of the DOM.

$('#loaded').on('click', '#someButton', function () {   
   //do something
});