将文本名称附加到每个输入

Question

我尝试动态添加输入。但是我添加的每个输入都是空白而没有名称。

＆＃13;

＆＃13;

$(document).ready(function() {
    var moreUploadTag = '';
    $('#attachMore').click(function() {
        moreUploadTag += '<input type="text"/>';
	    jQuery(moreUploadTag).detach().appendTo("#boxed");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


	<div id="boxed">
		<input type="text" name="" />
	</div>
		<p id="attachMore">attachMore</p>

＆＃13;

＆＃13;

＆＃13;

我把它留空而没有名字的目的是我想动态地创建名称：

＆＃13;

＆＃13;

$('#addName').click(function(){
	//$('input').attr("name", $(this).attr("name") + "test");
	var named = $('input').val();  
	$('input').attr("name", $('input').attr("name") + named); 
});

$(document).ready(function() {


    $('#attachMore').click(function() {
        var moreUploadTag = '';
        moreUploadTag += '<input type="text"/>';
	    jQuery(moreUploadTag).detach().appendTo("#boxed");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxed">
		<input type="text" name="" />
	</div>
		<p id="attachMore">attachMore</p>

		<p id="addName">addName</p>

＆＃13;

＆＃13;

＆＃13;

然而，它为所有输入添加了名称。

我的问题是如何为每个输入添加名称输入？

提前感谢您的帮助。干杯。

Answer 1

你在找这样的东西吗？

＆＃13;

＆＃13;

$('#addName').click(function(){
	$('input').each(function(){
        var input = $(this);
        input.attr("name", input.val()); 
    });
});

$(document).ready(function() {


    $('#attachMore').click(function() {
        var moreUploadTag = '';
        moreUploadTag += '<input type="text"/>';
	    jQuery(moreUploadTag).detach().appendTo("#boxed");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxed">
		<input type="text" name="" />
	</div>
		<p id="attachMore">attachMore</p>

		<p id="addName">addName</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为问题是你需要告诉jquery什么名称与什么输入。

var inputHtml = '<div class="inputGroup"><input type="text" /><button class="addName">add name</button></div>';
var yourname = 'allen';

$('.body').on('click', '.addInput', function() {
  $('.target').prepend(inputHtml);
});

$('.body').on('click', '.addName', function() {  
  if($(this).siblings('input').length) {
     $(this).siblings('input').attr('name', yourname);
     // debug 
     alert($(this).parent().children('input').attr('name'));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="body">
<div class="target"></div>
<button class="addInput">add input</button>
</div>