Javascript 如何获取用户创建输入的用户文本输入值，jQuery

我创建了一个按钮，允许用户创建新的文本输入。我试图获取新创建输入的文本输入值

HTML

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

//添加收音机
$（'.add radio'）。单击（函数（）{
$（“ul.new radios”）。追加（“
”；
});
//获取输入值
var newRadio=$（'input.added radio'）.val（）；
$（'.values'）。单击（函数（）{
$（“p.theValues”）。追加（“”+newRadio+”
”）；
});
//删除收音机
$（'div.pop-up-box-radio'）。在（'click'，'input.deleteRadio'，function（）上{
var clickedButton=$（此项）；
clickedButton.parent（）.remove（）；
});

单击“值”按钮时，我得到的唯一响应是“未定义”

---

您需要对JS稍加修改，才能找到找到的新元素

首先，

var newRadio

将在浏览器加载时运行，而不是在单击功能上运行以创建新输入。最好的选择是在单击

.values

按钮时运行它

其次，

.click（）

无法找到动态创建的元素。如果将其更改为

。在（'click'

函数上，它将能够找到动态添加的元素

第三点也是最后一点，这将只找到一个元素，而不会找到所有元素。如果您创建一个

each（）

函数并循环，您将能够找到所有输入

//添加收音机
$（'.add radio'）。单击（函数（）{
$（“ul.new radios”）。追加（“
”；
});
$（'.values'）。在（'click'，function（）上{
变量列表=“”；//创建列表变量
$（'input.added radio'）。每个（函数（）{//启动每个循环
var curRadio=$（this）.val（）；//获取当前项的值
list+=curRadio+'-'；//将其附加到列表中
})；//结束循环
$（“p.theValues”）.append（“”+list+“
”）；//将列表追加到页面
});
//删除收音机
$（'div.pop-up-box-radio'）。在（'click'，'input.deleteRadio'，function（）上{
var clickedButton=$（此项）；
clickedButton.parent（）.remove（）；
})；

li{
列表样式：无；
}

您的newRadio变量在初始页面加载时获取$（'input.added radio'）的值（未定义，因为尚未添加新字段）

如果在click函数中移动.val（）更新，JSFIDLE就会工作

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

$（'.values'）。单击（函数（）{
//获取输入值
var newRadio=$（'input.added radio'）.val（）；
$（“p.theValues”）。追加（“”+newRadio+”
”）；
});

---

另一方面，$（'input.added radio'）.val（）将仅在存在多个值时从第一个字段获取值

获取匹配元素集中第一个元素的当前值

（来自.val（）api）

因此，如果用户单击两次New Radio并在两个字段中输入文本，则单击Values按钮时，仅会追加第一个字段中的值。

---

如果通过单击右侧的X关闭第一个字段，则将使用下一个字段中的值。

您当前的实现只会提供第一个动态创建的输入控件中的值。因此，您需要迭代每个元素

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

$（'.values'）。单击（函数（）{
$（'input.added radio'）。每个（函数（i，op）
{
$（“p.theValues”）.append（“”+$（this.val（）+”
”）；
});
});

小提琴：

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