如何獲得用戶創建的輸入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將在瀏覽器加載時運行，而不是在click函數上運行以創建新輸入。 最好的選擇是單擊.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-radio'）的值（未定義，因為尚未添加任何新字段）。

如果在click函數中移動.val（）更新，則JSFiddle可以工作

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

更新了JSFiddle

---

順便說一句，$（'input.added-radio'）。val（）僅在存在多個倍數時才從第一個字段獲取值

獲取匹配元素集中第一個元素的當前值...

（來自.val（）API）

因此，如果用戶單擊“新建廣播”兩次並在兩個字段中都輸入了文本，則在單擊“值”按鈕時，僅會添加第一個中的值。 如果通過單擊右側的X關閉第一個字段，則將使用下一個字段的值。

Answer 3

您當前的實現只會為您提供第一個動態創建的輸入控件的值。 因此，您將需要遍歷每個元素。

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

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