JQuery не может выбрать значение из ввода, созданного динамически

Question

Что я хочу сделать, так это добавить несколько входов в этот div с id "addedRoles". Это первое, как это:

<div id="addedRoles" class="form-group"> 
    <div class="col-md-10"> 
     <input class="addedRole form-control" type="text" name="newRoleNames" /> 
    </div> 
</div> 

И я добавил еще дивы, используя эти коды:

$('#btnAddNewRole').click(function (event) { 
      $('#addedRoles').append(
       '<div class="col-md-10">' 
       + '<input class="addedRole form-control" type="text" name="newRoleNames" />' 
       + '</div>'); 
     }); 

После этого я пытался выбрать значения из всех входов, но все, что я получил это значение от первого ввод жесткого кода. Это потому, что входы создавались динамически? Как получить от них выгоду? Благодаря

Answer 1

Для динамически добавленного элемента .click() не Огонь. Кроме того, добавьте класс в текстовое поле. Идентификатор должен быть уникальным во всех DOM.

Для динамически добавленного элемента вы должны .on в любом случае.

$(document).on('click','.txtboxClass',function (e) 
{ 
    //do stuff here 
    var userInput = $(this).val(); 
}); 

ИЛИ

$('.txtboxClass').on('click',function (e) 
{ 
    //do stuff here 
    var userInput = $(this).val(); 
}); 

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

Answer 2

Попытки использовать имя класса «addedRole», чтобы получить все значения, так как атрибут «имя» должен быть уникальным

или

$("#addedRoles :text").each(function(i, text){ 
    var $val = $(text).val(); 
}) 

Answer 3

Try, чтобы получить все входы в классе, используя ниже:

$("#addedRoles :input").each(function(){ 
var input = $(this).val(); 
}); 

Answer 4

Я предлагаю вам получение входных значений так:

$('#addedRoles input').val(); 

Но он возвращает значение первого входа в только матчей элементов , правый путь:

var values = []; 
$('#addedRoles input').each(function(){ 
    values.push($(this).val()); 
}); 

Here's JSFiddle example