[英]On Click add HTML Elements
I am stuck with jquery wherein I am trying to add dynamic html elements (on click of +) which should also get removed on clicking on (-). 我被jquery困住了,其中我试图添加动态html元素(单击+时),单击(-)也应将其删除。 Each element should have unique name and id say "name_1","name_2"...
每个元素应具有唯一的名称和ID,分别为“ name_1”,“ name_2” ...
But it doesn't seem to going my way. 但这似乎并不符合我的意愿。
Here is my code: 这是我的代码:
$(document).ready(function() { var maxField = 10; var addButton = $('.add_button'); var wrapper = $('.field_wrapper'); var fieldHTML = $('.field_wrapper1').html(); var x = 1; $('.add_button').click(function() { if (x < maxField) { x++; $('.field_wrapper').append('<div class="field_wrapper1" style = "display:none;margin:20px;"><div><strong>*Upload New Contract Copy :</strong><input type="text" name="text_1" id = "text_1" value="" maxlength="50"/><strong><font color="#ff0000">* </font>Upload New Contract Copy :</strong><input type="file" name="pdf_1" id="pdf_1" accept="application/pdf" /><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="http://www.allintravellocal.com/images/minus_img.jpg"/></a><label for="contract_copy_pdf" class="err" id="err_lbl_contract_copy_pdf"></label></div></div>'); } }); $(wrapper).delegate('.remove_button', 'click', function(e) { e.preventDefault(); $(this).parent('div').remove(); x--; }); });
<div class="field_wrapper"> <div> <strong><font color='#ff0000'>* </font>Upload New Contract Copy :</strong> <input type="text" name="contract_copy_text_1" id="contract_copy_text_1" value="" maxlength="50" /> <strong><font color='#ff0000'>* </font>Upload New Contract Copy :</strong> <input type="file" name="contract_copy_pdf_1" id="contract_copy_pdf_1" accept="application/pdf" /> (*.pdf) <a href="javascript:void(0);" class="add_button" title="Add field"> <img src="http://www.allintravellocal.com/images/plus_img.jpg" /> </a> <label for="contract_copy_pdf" class="err" id="err_lbl_contract_copy_pdf"></label> </div> </div>
Here is my fiddle : 这是我的小提琴:
Why you have this display:none
inside field_wrapper1: 为什么
display:none
field_wrapper1内无:
<div class="field_wrapper1" style = "display:none;margin:20px;">
You will never see the newly created element unless change to display:block
. 除非更改为
display:block
否则您将永远看不到新创建的元素。 And for the increment unique name and id: Place x++;
对于递增的唯一名称和ID:放置
x++;
after appended function like so: 在附加函数之后像这样:
$('.field_wrapper').append('<div class="field_wrapper1" style = "display:block;margin:20px;"><div><strong>*Upload New Contract Copy :</strong><input type="text" name="text_'+x+'" id = "text_'+x+'" value="" maxlength="50"/><strong><font color="#ff0000">* </font>Upload New Contract Copy :</strong><input type="file" name="pdf_1" id="pdf_1" accept="application/pdf" /><a href="javascript:void(0);" class="remove_button" title="Remove field">-</a><label for="contract_copy_pdf" class="err" id="err_lbl_contract_copy_pdf"></label></div></div>');
x++;
Its working as expected but with few things to modify: 其工作正常,但需要修改的地方很少:
You have set
display:none
to your added element and even though its getting appended its not getting shown in theUI
.您已将
display:none
设置为添加的元素,即使已添加它也未在UI
显示它。 So just remove that property as below :因此,只需删除该属性,如下所示 :
$('.field_wrapper').append('<div class="field_wrapper1" style = "margin:20px;">... }
Use
.on
instead of.delegate
if you are usingjquery.js
>1.7
because As of jQuery 1.7,.delegate()
has been superseded by the.on()
method according to this and so the below code changes如果您使用的是
jquery.js
>1.7
请使用.on
而不是.delegate
,因为自jQuery 1.7起,.delegate()
已根据此被.on()
方法取代,因此以下代码会发生变化
Changes 变化
$(wrapper).on('click','.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
Check this Js Fiddle link, and each elements have unique id and name as you need. 选中此Js Fiddle链接,然后根据需要每个元素都有唯一的ID和名称。
$(document).ready(function(){
var maxField = 10;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var fieldHTML = $('.field_wrapper1').html();
var x = 1;
$('.add_button').click(function(){
if(x < maxField){
x++;
id='text_'+x;
name="name_"+x;
$('.field_wrapper').append('<div class="field_wrapper1" style = "display:block;margin:20px;"><div><strong>*Upload New Contract Copy :</strong><input type="text" name='+name+' id ='+ id+' value="" maxlength="50"/><strong><font color="#ff0000">* </font>Upload New Contract Copy :</strong><input type="file" name="pdf_1" id="pdf_1" accept="application/pdf" /><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="http://www.allintravellocal.com/images/minus_img.jpg"/></a><label for="contract_copy_pdf" class="err" id="err_lbl_contract_copy_pdf"></label></div></div>');
}
});
$(wrapper).delegate('.remove_button','click', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.