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

Question

我有一个带有文件上传框的表单，并且我正在使用 jQuery Filestyle 插件 (http://www.appelsiini.net/projects/filestyle) 来设置输入样式。我还有一个简单的 JavaScript 函数，允许用户上传多个文件而无需提交表单。我的初始文件上传输入看起来很完美，但是当用户单击“上传其他文件”按钮并创建新输入时，它根本没有样式。我假设这是因为插件已经在页面加载时运行，并且修改 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() 正在选择新添加的文件输入，并通过初始化插件为其添加样式。