选择动态创建的元素

我创建了一个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); 
});

来源

2015-09-21 user525146

同'克隆元素id'是问题 – nikhil

解释**无法选择动态创建的元素**。你如何选择？ – Manwal

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

的解决方案是使用一类，而不是ID来选择元素

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); 
 
});

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

来源

2015-09-21 07:13:08

你克隆元素具有相同的ID，如果你想查询只使用

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

和其他人一样，ids应该是唯一的。使用类定义，而不是儿童id名称。

来源

2015-09-21 07:14:40

我觉得你的选择是错了，它必须是：

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

，并考虑删除ID ATTR以避免多个ID。

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

来源

2015-09-21 07:15:57

当你克隆一个元素与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); 
});

来源

2015-09-21 07:16:22

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

如果您想选择特定的输入设定值到你可以使用索引和发现，指数的设定值

来源

2015-09-21 07:17:35 guradio

选择动态创建的元素

回答

相关问题