Как получить значение пользовательского ввода текста созданного пользователем ввода, jQuery

Question

Я создал кнопку, которая позволяет пользователю создавать новый ввод текста. Я пытаюсь получить значение ввода текста вновь созданного ввода.

HTML

<div class='pop-up-box-radio' Title="Edit Radios"> 
    <div style="display: inline; float: left; margin-left: 5%;"> 
     <div style="clear: both;"> 
      <ul class="new-radios"></ul> 
     </div> 
     <p style="padding-top: 15px;"> 
      <input type="button" class="add-radio" value="New Radio" /> 
     </p> 
     <p> 
      <input type="button" class="values" value="Values" /> 
     </p> 
     <p class="theValues"></p> 
    </div> 
</div> 

JQuery

// ADD RADIO 
$('.add-radio').click(function(){ 
    $("ul.new-radios").append("<li class='radioLi'><div style='dispaly: inline;'><input class='added-radio' type='text' style='width: 150px;' /><input type='button' class='deleteRadio' value='X' /></div></li>"); 
}); 

// GET VALUE OF INPUT 
var newRadio = $('input.added-radio').val(); 

$('.values').click(function(){ 
    $("p.theValues").append("<p>" + newRadio + "</p>"); 
}); 

// DELETE RADIO 
$('div.pop-up-box-radio').on('click', 'input.deleteRadio', function() { 
    var clickedButton = $(this); 
    clickedButton.parent().remove(); 
}); 

При нажатии кнопки значение щелкнул, единственный ответ, который я получаю 'не определен'.

JSfiddle

Answer 1

Вы должны незначительные поправки к вашему JS, чтобы быть в состоянии найти новый элемент, который вы нашли.

Во-первых, var newRadio будет работать на загрузке браузера, а не на функцию щелчка, чтобы создать новый вход. Ваш лучший вариант - запустить его, нажав кнопку .values.

Во-вторых, .click() не может найти динамически созданные элементы. Если вы измените это значение на .on('click', он сможет найти динамически добавленный элемент.

В-третьих, это найдет только один элемент, а не все. Если вы сделаете функцию each() и пропустите ее, вы сможете найти все входы.

// ADD RADIO 
 
$('.add-radio').click(function() { 
 
    $("ul.new-radios").append("<li class='radioLi'><div style='dispaly: inline;'><input class='added-radio' type='text' style='width: 150px;' /><input type='button' class='deleteRadio' value='X' /></div></li>"); 
 
}); 
 
$('.values').on('click', function() { 
 
    var list = ''; // create list variable 
 
    $('input.added-radio').each(function() { // start each loop 
 
    var curRadio = $(this).val(); // get value of current item 
 
    list += curRadio + ' - '; // append it to the list 
 
    }); // end loop 
 
    $("p.theValues").append("<p>" + list + "</p>"); // append list to the page 
 
}); 
 

 
// DELETE RADIO 
 
$('div.pop-up-box-radio').on('click', 'input.deleteRadio', function() { 
 
    var clickedButton = $(this); 
 
    clickedButton.parent().remove(); 
 
});

li { 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='pop-up-box-radio' Title="Edit Radios"> 
 
    <div style="display: inline; float: left; margin-left: 5%;"> 
 

 
    <div style="clear: both;"> 
 
     <ul class="new-radios"></ul> 
 
    </div> 
 
    <p style="padding-top: 15px;"> 
 
     <input type="button" class="add-radio" value="New Radio" /> 
 
    </p> 
 
    <p> 
 
     <input type="button" class="values" value="Values" /> 
 
    </p> 
 
    <p class="theValues"></p> 
 
    </div> 
 
</div>

Answer 2

Ваш newRadio вар захватывает значение $ ('input.added-радио') на начальной загрузки страницы (не определено, так как нет новых месторождений пока не добавлены).

Ваш JSFiddle работает, если вы перемещаете обновления .val() внутри функции мыши

$('.values').click(function(){ 
    // GET VALUE OF INPUT 
    var newRadio = $('input.added-radio').val(); 
    $("p.theValues").append("<p>" + newRadio + "</p>"); 
}); 

Updated JSFiddle

---

Как и в сторону, $ ('input.added-радио'). val() будет захватывать значение только из первого поля, если существуют кратные

Получить текущее значение первого элемента в наборе ma tched элементов ...

(от .val() апи)

Таким образом, если пользователь нажмет New Radio дважды и вводит текст в обоих полях, только значение из первого будет добавлено, когда нажимается кнопка «Значения». Если первое поле закрыто, нажав X вправо, то будет использовано значение из следующего поля.

Answer 3

Ваша текущая реализация только даст вам значение из первого динамически созданного элемента управления вводом. Поэтому вам нужно будет проходить через каждый элемент.

$('.values').click(function(){ 
    $('input.added-radio').each(function(i,op) 
    { 
    $("p.theValues").append("<p>" + $(this).val() + "</p>"); 
    }); 
}); 

Fiddle: http://jsfiddle.net/91e4a7wy/30/