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

Posted 2023-05-09

【中文标题】为啥使用 jquery.find(":input") 添加动态输入时无法获取输入元素？

【英文标题】：why can't get input elements when add dynamic input by using jquery.find(":input")?为什么使用 jquery.find(":input") 添加动态输入时无法获取输入元素？

【发布时间】：2019-05-20 21:49:44

【问题描述】：

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

$('#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：

【问题讨论】：

如果你想找到input元素使用var myForm = $('#testForm').find('input')

几个小时后，我弄清楚了问题所在，不幸的是，它是您的输入字段 id nodeType（由 jQuery 在内部出于某种目的使用，并且该输入字段对其进行了修改），是的，说真的，只需更改它id，它将正常工作。

另外一件不必要的事情是，从 inputStr

中删除输入结束标记

【参考方案1】：

将选择器更改为：

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

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

【讨论】：

几个小时后，我弄清楚了问题所在，不幸的是，这是您的输入字段 id nodeType （jQuery 内部出于某种目的使用该输入字段并修改它） ，是的，说真的，只需更改该 ID，它就会正常工作。

@shajji 它完美地解决了我的问题。谢谢你的帮助！