Question

我坚持使用jquery，其中我试图添加动态html元素（点击+），这也应该在点击（ - ）时删除。每个元素都应具有唯一的名称，并且ID为＆＃34; name_1＆＃34;，＆＃34; name_2＆＃34; ...

但它似乎没有按照我的方式行事。

这是我的代码：

＆＃13;

$(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--;
  });
});

＆＃13;

<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>

＆＃13;

这是我的小提琴：

Demo

Answer 1

为什么你在field_wrapper1里面有display:none：

<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

它按预期工作但很少需要修改：

<强> DEMO

您已将display:none设置为添加的元素，即使它已添加获得附加后不会显示在UI中。所以只需删除该财产如下：

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

如果您使用.on＆gt;，请使用.delegate代替jquery.js 1.7因为从jQuery 1.7开始，.delegate()已被取代根据{{3}}的.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--;
});
});

点击添加HTML元素

3 个答案: