Question

我在UI表单上工作，其中（以及其他）允许用户点击链接以添加其他文件上传输入字段，以防他希望上传超过标准的3个初始选项。

两件事：

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

在我一直在使用的代码之下;我已经留在评论中，所以你可以看到我一直在尝试的东西。

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>

我已经在几十页上看到过这个，但却无法让它发挥作用;任何帮助表示赞赏。

Answer 1

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

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

演示here

使用jquery在url上添加其他输入

1 个答案: