Question

我有一个函数，当用户添加文件时，使用jQuery添加一个额外的文件上传按钮。我的问题是我似乎无法添加正确的格式或每次添加。我当前的函数只是尝试直接添加字符串：

jQuery(document).ready(function($) {
    $(function() {
        $("input:file").change(function(){
            $("input:file").after("</td></tr><tr><td class=\"field_name span4\"><strong></strong></td><td class=\"field_option\"><input type=\"file\" name=\"pictures\">");
        });
    });
});

您可以在此处查看此版本的实时版本：http://1ro.co/salem/?module=insert

上面显示的方法存在的问题是它没有添加前两个结束标记：</td></tr>。

我尝试过设置$（“input：file”）等方法;到一个变量，但是没有为第一个之后的每个值设置。例如：

var count = 0;

jQuery(document).ready(function($) {
    $(function() {
        var input = $("input:file");
        input.change(function(){
            input.after(input.get(count++));
        });
    });
});

然而，这根本不附加（理论上可能会附加每个元素），而且我不能在input.get（count）上使用.after（）。

简单来说，我希望改进这一点并使其成为一个新的文件上传按钮，而不是不正确地格式化。如果可能的话，我宁愿使用方法2，但目前我希望它能够正常工作。

Answer 1

您需要为每个新文件输入重新添加处理程序，因此最好在函数中将其隔离：

var addfile = function() {
  var newRow = $("<tr><td class=\"field_name span4\"><strong></strong></td>" +
      "<td class=\"field_option\"><input type=\"file\" name=\"pictures\">").
    insertAfter($(this).closest('tr'));

  newRow.find('input:file').change(addfile);
};

$("input:file").change( addfile );

Answer 2

我刚尝试了你的现场演示，它正在插入一些内容。但它只发生一次，因为您的事件处理程序仅绑定到第一个对象。

我会尝试使用以下内容进行更改功能：

$('input:file').change(function() {
    $(this).closest('tr').after($(this).closest('tr').clone());
});

但你的改变处理程序也必须重建。

在上一次更改时附加新文件上载按钮

2 个答案: