javascript - 每次我在 jQuery 中更改新创建的选择框的值时如何添加新的选择框？

Question

当我从选择框选择一个值时，我试图添加一个新的数字输入和一个复选框。在我添加一个选择框之后，选择框应该添加一个新的选择框。 我不知道我的代码有什么问题。 提前致谢。

var counter = 1;
$(document).ready(function(){

  $('#arithmetic' + counter).change(function(e)
                                    {
    counter++
    if( $('#arithmetic' + counter ).val() == '+' || '-' || '*' || '/'  || '%' )
    {

      var newTextBoxDiv = $(document.createElement('div'))
      .attr("id", 'TextBoxDiv' +counter);
      newTextBoxDiv.html('<input type="number" name="input' + counter + ' "  id="input' + counter + '" value="" > \

<select id="arithmetic' + counter + '" >\

<option id="select" value="Select" selected>Select</option>\

<option id="add" value="+">+</option><option id="subtract" value="-">-</option>\

<option id="multiply" value="*">*</option><option id="division" value="/"></option>\
<option id="percentage" value="   %">%</option></select>');


      newTextBoxDiv.appendTo("#container center");
    }
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="container">
  <center>
    <div id="TextBoxDiv1">
      <input type="number"/>
      <select id="arithmetic1">
        <option id="select" value="Select" selected>Select</option>
        <option id="add" value="+">+</option>
        <option id="subtract" value="-">-</option>
        <option id="multiply" value="*">*</option>
        <option id="division" value="/">/</option>
        <option id="percentage" value="%">%</option>
      </select>
    </div>
  </center>

</div>

Answer 1

您需要delegate the events在新创建的元素上。所以，你需要做的是，而不是:

$('#arithmetic' + counter).change(function(e)

将其更改为:

$("#container").on("change", '#arithmetic' + counter, function(e)

还有一些错误...

1. 替换:

   $(document.createElement('div'))
   

   与:

   $("<div />")
   

2. 删除 <center>标签。