單擊時添加HTML元素

Question

我被jquery困住了，其中我試圖添加動態html元素（單擊+時），單擊（-）也應將其刪除。 每個元素應具有唯一的名稱和ID，分別為“ name_1”，“ name_2” ...

但這似乎並不符合我的意願。

這是我的代碼：

 $(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" />&nbsp;&nbsp;&nbsp;&nbsp;(*.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> 

這是我的小提琴：

演示版

Answer 1

為什么display:none field_wrapper1內無：

<div class="field_wrapper1" style = "display:none;margin:20px;">

除非更改為display:block否則您將永遠看不到新創建的元素。 對於遞增的唯一名稱和ID：放置x++; 在附加函數之后像這樣：

  $('.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++;

Answer 2

其工作正常，但需要修改的地方很少：

演示

• 您已將display:none設置為添加的元素，即使已添加它也未在UI顯示它。 因此，只需刪除該屬性，如下所示 ：

$('.field_wrapper').append('<div class="field_wrapper1" style = "margin:20px;">... }

• 如果您使用的是jquery.js > 1.7請使用.on而不是.delegate ，因為自jQuery 1.7起， .delegate()已根據此被.on()方法取代，因此以下代碼會發生變化

變化

$(wrapper).on('click','.remove_button', function(e){ 
     e.preventDefault();
     $(this).parent('div').remove();
     x--;
});

Answer 3

選中此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--;
});
});