Выбрать динамически созданный элемент

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. Таким образом, #child вернет первый элемент child, но затем применение правила data-row будет отфильтровывать выбранный элемент, чтобы вы получали 0.

Решение использовать класс вместо идентификатора для выбора элемента

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>

Answer 2

Вы клонировали элемент с таким же идентификатором, если вы хотите проверить, просто использовать

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

Как и другие, ids должен быть уникальным. Вместо определения дочернего идентификатора используйте определение класса.

Answer 3

Я думаю, что ваш селектор неправильно оно должно быть:

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

и рассмотреть, чтобы удалить Аттрибут ID, чтобы избежать нескольких идентификаторов.

Демо: http://jsfiddle.net/o1j7z1gL/

Answer 4

Когда вы клонировать элемент с идентификатором, изменить идентификатор (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 5

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

Если вы хотите, чтобы выбрать конкретный вход для установки значения в вы можете использовать индекс и установить значение, находя, что индекс