Почему поле не отображается?

Question

Я пытаюсь добавить поле выбора обоими способами, во-первых, динамически и даю значения для выбора полей.пытаясь с динамически, чтобы он работал хорошо.но при попытке отобразить какое-то поле выбора, задав значение для поля выбора «1-й номер ребенка», поэтому в первый раз я получаю выходные данные, но во второй раз они не работают

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

Как вы уже видели, проблема заключается во второй попытке отобразить поле выбора, задав значение для поля выбора «1-й ребенок», чтобы оно не работало.

Answer 1

Ваша проблема называется "делегирование".Когда вы динамически добавляете в DOM то, чего не было при первой загрузке, вы должны сначала просмотреть уже существующий родительский элемент.

Учитывайте это.У вас есть существующий элемент: <div id="loaded"></div>

Затем вы динамически добавляете что-то в этот div: <button type="button" id="someButton">

Чтобы прослушать этот щелчок, вы должны пройти черезparent div, так как это оригинальная часть DOM.

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