DOM修改后有什么方法可以重新运行jQuery插件？

Question

我有一个带有文件上传框的表单，我正在使用 jQuery Filestyle 插件 (http://www.appelsiini.net/projects/filestyle) 来设置输入样式。我还有一个简单的 JavaScript 函数，允许用户上传多个文件而无需提交表单。我的初始文件上传输入看起来很完美，但是当用户单击 Upload Additional File 按钮并创建一个新输入时，它根本没有样式。我假设这是因为插件已经在页面加载时运行并且修改 DOM 意味着任何新的都不会应用样式。

假设这是问题所在，我的问题是是否有办法在新创建的文件输入上调用 Filestyle jQuery？

这是我的 Filestyle jQuery 代码：

    <script src="/scripts/jquery.filestyle.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
        $("input.file").filestyle({
            image: "/images/btn_select_file.gif",
            imageheight : 24,
            imagewidth : 115,
            width : 275,
        });
    });
    </script>

还有我的 JavaScript DOM 操作：

<script type="text/javascript">
var fileCounter = 1;
function addFile() {
  fileCounter++;
  var newdiv = document.createElement('div');
  newdiv.id = 'file' + fileCounter;
  newdiv.innerHTML = '<div class="form-item"><label for="file_' + inputCounter + '">Upload Additional File ' + (inputCounter) + '</label>\r<input type="file" name="file_' + inputCounter + '" id="file_' + inputCounter + '" class="file"><span class="space"><a href="javascript:removeFile(' + inputCounter + ');">Remove</a></span>';
  document.getElementById("files").appendChild(newdiv);
  document.getElementById("filecount").value = inputCounter;
}
</script>

感谢您的建议！

Answer 1

您必须在 function addFile() 函数中调用插件方法，让插件知道设置样式，以便您的新 function addFile() 函数可以类似于

function addFile() {
  fileCounter++;
  var newdiv = document.createElement('div');
  newdiv.id = 'file' + fileCounter;
  newdiv.innerHTML = '<div class="form-item"><label for="file_' + inputCounter + '">Upload Additional File ' + (inputCounter) + '</label>\r<input type="file" name="file_' + inputCounter + '" id="file_' + inputCounter + '" class="file"><span class="space"><a href="javascript:removeFile(' + inputCounter + ');">Remove</a></span>';
  document.getElementById("files").appendChild(newdiv);
  document.getElementById("filecount").value = inputCounter;
  $("input.file").last().filestyle({
            image: "/images/btn_select_file.gif",
            imageheight : 24,
            imagewidth : 115,
            width : 275,
        });
}

$("input.file").last() 正在选择新添加的文件输入，并通过为其初始化插件为其添加样式。

Answer 2

我会尝试这样的事情（虽然我还没有实际测试过）

<script type="text/javascript">
var inputCounter = 1;
function addFile() {
  inputCounter++;
  var newdiv = document.createElement('div');
  newdiv.id = 'file' + inputCounter;
  newdiv.innerHTML = '<div class="form-item"><label for="file_' + inputCounter + '">Upload Additional File ' + (inputCounter) + '</label>\r<input type="file" name="file_' + inputCounter + '" id="file_' + inputCounter + '" class="file"><span class="space"><a href="javascript:removeFile(' + inputCounter + ');">Remove</a></span>';
  document.getElementById("files").appendChild(newdiv);
  document.getElementById("filecount").value = inputCounter;
  $('#'+file_'+inputCounter).filestyle({
        image: "/images/btn_select_file.gif",
        imageheight : 24,
        imagewidth : 115,
        width : 275,
    });
}
</script>

此外，您的变量“fileCounter”似乎已被“inputCounter”切换，这可能会导致您出现问题。

Answer 3

当然，在你创建 newdiv 之后添加这个：

$(newdiv).filestyle({
    image: "/images/btn_select_file.gif",
    imageheight : 24,
    imagewidth : 115,
    width : 275,
});