Question

我动态创建了一个div并附加到div。我正在尝试从查询中添加数据并将其加载到该文本字段。但是，我无法选择动态创建的元素，因为它在DOM中不可见，因为它已经加载了。这就是我fiddle

<div id="parent">
    <input id='childButton' type="button" value="Add"/>
    <div id="child" data-row="0">
        <input type="text" value="" />
    </div>

</div>


var rowNum = 0;
$('#parent').on('click', '#childButton', function() {  
    var clone = $('#child').clone().attr('data-row', ++rowNum);
   $('#parent').append(clone);
   console.log($('#child[data-row=1]').length);
});

Answer 1

问题是id选择器，只返回具有给定id的第一个元素。在您的情况下，您正在使用id child创建多个元素。因此，#child将返回第一个child元素，但随后应用data-row规则将过滤掉所选元素，以便获得0结果。

解决方案是使用类而不是id来选择元素

＆＃13;

var rowNum = 0;
$('#parent').on('click', '#childButton', function() {
  var clone = $('#child').clone().attr('data-row', ++rowNum).removeAttr('id');
  $('#parent').append(clone);

  //here clone refers to the dynamically create element
  //but if you want to fetch the element using a selector then

  snippet.log($('.child[data-row=1]').length);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div id="parent">
  <input id='childButton' type="button" value="Add" />
  <div id="child" class="child" data-row="0">
    <input type="text" value="" />
  </div>

</div>

＆＃13;

Answer 2

如果您想检查使用

，那么您的克隆元素具有相同的ID

console.log($('div[data-row=1]').length);

像其他人所说，ids应该是唯一的。使用类定义代替子ID名称。

Answer 3

当你克隆一个带有id的元素时，请更改id（fiddle）：

var rowNum = 0;
$('#parent').on('click', '#childButton', function() {  
    var origin = $('#child');
    var originId = $('#child').attr('id');
    var cloneId = originId + rowNum;
    var clone = $('#child').clone().attr('data-row', ++rowNum).attr('id', cloneId);
   $('#parent').append(clone);
   console.log($('#' + cloneId).length);
});

Answer 4

DEMO

var rowNum = 0;
$('#parent').on('click', '#childButton', function() {  
    var clone = $('#child').clone().attr('data-row', ++rowNum);
   $('#parent').append(clone);
   console.log($('#parent input:text').length);
});

您也可以使用选择器input:text

选择输入

UPDATE

DEMO

如果要选择要设置值的特定输入，可以使用索引并通过查找索引来设置值

Answer 5

我认为你的选择器是错误的必须是：

console.log($('#child[data-row="1"]').length);

并考虑删除id attr以避免多个ID。

演示：http://jsfiddle.net/o1j7z1gL/

选择动态创建的元素

5 个答案: