選擇動態創建的元素

我創建了一個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

選擇動態創建的元素

回答

相關問題