Jquery 动态添加多个文本框中的问题
有两个内联文本框，它们旁边有一个“+”符号。 单击加号后，将添加一个新的文本框，它将具有 用于添加和删除文本框的“+”和“-”符号 分别地我使用资源来实现我的文本框。 现在，我只想为每一个添加10个文本框。意思是10 关键字[]的文本框和链接名称[]的10个文本框 请参见输入标记名称中的。但是这个代码不起作用 如果我继续为关键字[]添加文本框，则会显示19个文本框 添加，然后如果我尝试为link_name[]添加文本框，则 不添加单个文本框并显示达到的最大限制。 如果添加操作完成，反之亦然，则其工作正常Jquery 动态添加多个文本框中的问题,jquery,html,textbox,jquery-effects,Jquery,Html,Textbox,Jquery Effects,有两个内联文本框，它们旁边有一个“+”符号。 单击加号后，将添加一个新的文本框，它将具有 用于添加和删除文本框的“+”和“-”符号 分别地我使用资源来实现我的文本框。 现在，我只想为每一个添加10个文本框。意思是10 关键字[]的文本框和链接名称[]的10个文本框 请参见输入标记名称中的。但是这个代码不起作用 如果我继续为关键字[]添加文本框，则会显示19个文本框 添加，然后如果我尝试为link_name[]添加文本框，则 不添加单个文本框并显示达到的最大限制。 如果添加操作完成，反之亦然，则其
$(document).ready(function() {
var id_1 = 2, max = 9, append_data;
/*TEXT BOXES FOR LINK NAMES*/
/*If add_1 icon was clicked*/
$("#add_1").live('click', function(){
if($("div[id^='txt_']").length <9){ //Don't add new text box if limit is reached
$(this).remove(); //remove add icon from the current text box
var append_data = '<div id="txt_'+id_1+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="input_'+id_2+'" name="link_name[]"/></div><div class="right"><img src="add.png" id="add_1"/> <img src="remove.png" id="remove_1"/></div></div>';
$("#textboxes_1").append(append_data); //append new text box in main div
$("#txt_"+id_1).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
id_1++;
}
else{
alert("Maximum 10 textboxes are allowed");
}
})
$("#remove_1").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
$(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
if($("div[id^='txt_']").length >1){
append_data = '<img src = "remove.png" id = "remove_1"/>';
}
else{
append_data = '';
}
if($("#add_1").length< 1){
$("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_1"/>'+append_data);
}
});
})
/*TEXT BOXES FOR KEYWORDS*/
/*If add_2 icon was clicked*/
var id_2 = 12, max = 19;
$("#add_2").live('click', function(){
if($("div[id^='txt_']").length <19){ //Don't add new text box if limit is reached
$(this).remove(); //remove add icon from the current text box
var append_data = '<div id="txt_'+id_2+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="input_'+id_2+'" name="keyword[]"/></div><div class="right"><img src="add.png" id="add_2"/> <img src="remove.png" id="remove_2"/></div></div>';
$("#textboxes_2").append(append_data); //append new text box in main div
$("#txt_"+id_2).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
id_2++;
}
else{
alert("Maximum 10 textboxes are allowed");
}
})
$("#remove_2").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
$(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
if($("div[id^='txt_']").length >1){
append_data = '<img src = "remove.png" id = "remove_2"/>';
}
else{
append_data = '';
}
if($("#add_2").length< 1){
$("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_2"/>'+append_data);
}
});
})
});
$（文档）.ready（函数（）{
变量id_1=2，最大值=9，追加_数据；
/*链接名称的文本框*/
/*如果单击了add_1图标*/
$（“添加1”）.live（'单击'，函数（））{
if（$（（“div[id^='txt_']）长度1）{
附加_数据=“”；
}
否则{
附加_数据=“”；
}
如果（$（“#加2”）。长度<1）{
$（“#”+prev_obj+“.right”）.html（“”+append_data）；
}
});
})
});
<div id="textboxes_1" class="inline">
<div id="text_1" class="text_div">
<div class="left">
<input type="text" id="input_1" value="Enter URL(s) here" name="link_name[]" />
</div>
<div class="right">
<img src="add.png" id="add_1" />
</div>
</div>
</div>
<div id="textboxes_2" class="inline">
<div id="text_11" class="text_div">
<div class="left">
<input type="text" id="input_11" value="Enter Keyword(s) here" name="keyword[]" />
</div>
<div class="right">
<img src="add.png" id="add_2" />
</div>
</div>
</div>
<div style="clear:left;"></div>
<input type="submit" id="submit" name="submit" value="SUBMIT">
好的，所以答案很简单，您犯了一些逻辑错误，下面是您的代码以及注释中描述的一些修复：
$(document).ready(function() {
var id_1 = 2, max = 9, append_data;
/*TEXT BOXES FOR LINK NAMES*/
/*If add_1 icon was clicked*/
$("#add_1").live('click', function(){
if($("#textboxes_1 input").length <10){ //Don't add new text box if limit is reached
// Here You have to check #textboxes_1 for his own input's, and You have to give 10 not 9, becouse lenght is allways actual number of elements
$(this).remove(); //remove add icon from the current text box
var append_data = '<div id="txt_'+id_1+'" class="txt_div"><div class="left"><input type="text" id="input_'+id_1+'" name="link_name[]"/></div><div class="right"><img src="add.png" id="add_1"/> <img src="remove.png" id="remove_1"/></div></div>';
// in the code abowe You give id="input_'+id_2+'", I belive it should be id="input_'+id_1+'"
$("#textboxes_1").append(append_data); //append new text box in main div
$("#txt_"+id_1).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
id_1++;
}
else{
alert("Maximum 10 textboxes are allowed");
}
})
$("#remove_1").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
$(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
if($("div[id^='txt_']").length >1){
append_data = '<img src = "remove.png" id = "remove_1"/>';
}
else{
append_data = '';
}
if($("#add_1").length< 1){
$("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_1"/>'+append_data);
}
});
})
/*TEXT BOXES FOR KEYWORDS*/
/*If add_2 icon was clicked*/
var id_2 = 12, max = 19;
$("#add_2").live('click', function(){
if($("#textboxes_2 input").length <20){ //Don't add new text box if limit is reached
// The same issue was here as well
$(this).remove(); //remove add icon from the current text box
var append_data = '<div id="txt_'+id_2+'" class="txt_div" ><div class="left"><input type="text" id="input_'+id_2+'" name="keyword[]"/></div><div class="right"><img src="add.png" id="add_2"/> <img src="remove.png" id="remove_2"/></div></div>';
$("#textboxes_2").append(append_data); //append new text box in main div
$("#txt_"+id_2).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
id_2++;
}
else{
alert("Maximum 10 textboxes are allowed");
}
})
$("#remove_2").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
$(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
if($("div[id^='txt_']").length >1){
append_data = '<img src = "remove.png" id = "remove_2"/>';
}
else{
append_data = '';
}
if($("#add_2").length< 1){
$("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_2"/>'+append_data);
}
});
})
$（文档）.ready（函数（）{
变量id_1=2，最大值=9，追加_数据；
/*链接名称的文本框*/
/*如果单击了add_1图标*/
$（“添加1”）.live（'单击'，函数（））{
如果（$（“#文本框_1输入”）。长度1）{
附加_数据=“”；
}
否则{
附加_数据=“”；
}
如果（$（“#加1”）。长度<1）{
$（“#”+prev_obj+“.right”）.html（“”+append_data）；
}
});
})
/*关键字的文本框*/
/*如果单击了add_2图标*/
变量id_2=12，最大值=19；
$（“添加2”）.live（'单击'，函数（））{
如果（$（“#文本框_2输入”）.length作为反弹效果，你需要@JonathandeM。我使用了jquery ui.min.js
。它提供了反弹效果。但在我的代码中，它没有呈现效果。我链接了问题中的一个资源，效果在他们展示的演示中起作用。你能给我们链接，包括CSS和图像路径到你的服务器，或者至少t:.right img{background:red；width:30px！important；height:30px！important；}
@bumerang我正在使用localhost。如果您想要css，它就是->您可以从我在问题中提到的资源中获得这两个图像。我还删除了代码style=“display:none”
查看结果。在关键字的文本框中，长度应为10。保留它20将添加20条记录！此外，我在删除文本框时遇到了一些问题。但是，如您所述更改选择器解决了问题。请检查我所提到的资源的演示。单击+
符号时出现的反弹效果不是h在我的例子中出现。文本框之间的间距也不像演示中那样。这就是我的文本框@SilentAssassin-在关键字的文本框中长度应该是10的方式。保持它20会添加20条记录！-是的，但这是你的代码，对于这些间隙，这是因为你附加到这些新元素的类，你给了emtxt\u div
，类，但你应该给出text\u div
，就像第一个haveYes一样，反弹效应现在也在发生。有一些命名不一致。因此我很高兴我能提供帮助：）