为什么使用 jquery.find(":input") 添加动态输入时无法获取输入元素？

Question

为什么添加动态输入时无法获取输入元素？但我可以在不添加动态输入的情况下获取输入元素！

$('#getInputBtn').click(function() {
  var myForm = $('#testForm').find(':input')
  console.log(myForm)
})

$('#addInputBtn').click(function() {
  var inputStr = '<div style="background: #F6F7F8; padding: 10px 0; margin-bottom: 10px;"><div class="row" style="margin-bottom: 10px;"><div class="col-md-6 col-sm-6 col-xs-12"><div class="form-item" style="width: 100%"><label for="nodeType" class="form-item-label-required col-md-4 col-sm-4 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;">nodeType</label><input id="nodeType" class="col-md-8 col-sm-8 col-xs-12" required></input></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="form-item" style="width: 100%"><label for="areaType" class="form-item-label-required col-md-4 col-sm-4 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;">areaType</label><input id="areaType" class="col-md-8 col-sm-8 col-xs-12" required></input></div></div></div><div class="row"><div class="col-md-6 col-sm-6 col-xs-12"><div class="form-item" style="width: 100%"><label for="countType" class="form-item-label-required col-md-4 col-sm-4 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;">countType</label><input id="countType" class="col-md-8 col-sm-8 col-xs-12" required></input></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="form-item" style="width: 100%"><label for="contractType" class="form-item-label-required col-md-4 col-sm-4 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;">contractType</label><input id="contractType" class="col-md-8 col-sm-8 col-xs-12" required></input></div></div></div></div>'
  $('#small').html(inputStr)
})

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<form action="" id="testForm">
  <div class="row" style="margin-bottom: 10px;">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="form-item" style="width: 100%">
        <label for="orgTypeList" class="form-item-label-required col-md-2 col-sm-2 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;width: 16%;">orgType</label>
        <input id="orgTypeList" class="col-md-10 col-sm-10 col-xs-12" style="width: 84%" required readonly />
      </div>
    </div>
  </div>
  <div id="small"></div>
  <div class="row" style="margin-bottom: 10px;">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="form-item" style="width: 100%">
        <label for="positionList" class="form-item-label form-item-label col-md-2 col-sm-2 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;width: 16%;">position</label>
        <input id="positionList" class="ui-input col-md-10 col-sm-10 col-xs-12 " style="width: 84%;" readonly />
      </div>
    </div>
  </div>
  <div class="row" style="margin-bottom: 10px;">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="form-item" style="width: 100%">
        <label for="postList" class="form-item-label col-md-2 col-sm-2 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;width: 16%;">post</label>
        <input id="postList" class="ui-input col-md-10 col-sm-10 col-xs-12 tagsinput" style="width: 84%;" readonly />
      </div>
    </div>
  </div>
</form>
<button id="getInputBtn">getInput</button>
<button id="addInputBtn">add Dynamic INPUT</button>

Codepen：

Answer 1

将选择器更改为：

$('#getInputBtn').click(function() {
    var myForm = $('#testForm :input');
    console.log(myForm);
});

它有效，但我不是 100% 确定原因。我稍后会检查并解释。现在，您至少可以修复您的代码。