1

我正在开发一个 UI 表单，该表单（除其他外）允许用户单击链接以添加额外的文件上传输入字段，以防他希望上传超过标准的 3 个初始选项。

两件事情：

  1. 不禁想到必须有一种更简单的方法来做我想做的事情。Javascript 从来不是我的强项之一，我可能会走很长一段路。
  2. 出于某种原因，我提出了解决方案；只允许添加一个额外的字段，没有更多，它只是停止工作！我希望每次单击链接时都添加另一个字段；不只是一次。

在我一直在使用的代码下方；我已经在评论中留下了，所以你可以看到我已经在尝试什么。

jQuery：

    // add and remove addtional image upload inputs
    jQuery('#add_image_upload_field').click( function( e ) {

    e.preventDefault();

    var newInput = '<input type="file" class="fullwidth" name="upload_attachment[]" />';

    // jQuery(this).prev().append(newInput).slideDown('slow');
    // jQuery('#upload_image input').filter(':last').append(newInput).slideDown('slow');
    // jQuery('input[name="upload_attachment[]"]').filter(':last').append('newInput');
    // jQuery('input[name="upload_attachment[]"]').append('newInput');

var addLink = '<a href="#" id="add_image_upload_field">Add another image input field</a>';

jQuery(this).parent().append(newInput);
jQuery(this).remove();
jQuery('#upload_image').append(addLink);

});

HTML：

<!-- Upload a picture -->
<fieldset name="upload_image" id="upload_image">
    <label for="upload_image">Upload pictures:</label>
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" />
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" />
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" />

    <a href="#" id="add_image_upload_field">Add another image input field</a>
    <!--<input type="button" id="add_image_upload_field" value="Add another image input field" />-->

</fieldset>

我已经在几十页上看到了这一点，但就是无法让它发挥作用；任何帮助表示赞赏。

4

1 回答 1

2

当您替换/添加元素时，附加到它的事件将消失。因此，如果您要添加新图像并想要附加事件处理程序，则需要委托给页面加载时已经存在的元素。像：

jQuery(document).on('click','#add_image_upload_field', function( e ) {

演示在这里

于 2013-09-28T23:34:43.270 回答