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

您的newRadio var在初始页面加载时抓取$（＆＃39; input.added-radio＆＃39;）的值（未定义，因为尚未添加新字段）。

如果在单击函数

中移动.val（）更新，则JSFiddle可以正常工作

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

Updated JSFiddle

顺便说一句，$（＆＃39; input.added-radio＆＃39;）。val（）只会在存在倍数的情况下从第一个字段中获取值

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

（来自.val（）api）

因此，如果用户单击两次New Radio并在两个字段中输入文本，则单击“值”按钮时，只会附加第一个中的值。如果通过单击右侧的X关闭第一个字段，则将使用下一个字段中的值。

Answer 2

您当前的实现仅为您提供第一个动态创建的输入控件的值。因此，您需要遍历每个元素。

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

小提琴：http://jsfiddle.net/91e4a7wy/30/

如何获取用户创建的输入，jQuery

2 个答案: