在新创建的元素上应用jQuery File Style插件设置

Question

我正在使用Mika Tuupola's File Style Plugin，我想要做的是，使用jQuery将此插件应用于新创建的元素。

这是我的代码：

<p><input type="file" name="" id="" /></p> 
  <p><button id="add">Add More...</button></p>


  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="http://www.appelsiini.net/download/jquery.filestyle.mini.js"></script>
  <script type="text/javascript">

     $("input[type=file]").filestyle({ 
         image: "choose-file.gif",
         imageheight : 22,
         imagewidth : 82,
         width : 250
     });


     $('#add').click(function() {

      $(this).parent().append('<p><input type="file" name="" id="" /></p>');

    });

  </script>

当我点击“添加更多”按钮时，它显示如下：

那么，我做错了什么？你能帮助我吗？

Answer 1

原来问题是插件的主要问题。它将提供的元素包装在设置为div的{​​{1}}中，这就是为什么所有新文件元素都是内联的。

解决此问题的唯一方法是修改插件以添加外部包装器（如您尝试执行的display: inline）。下载non minified plugin并找到如下代码：

p

然后让它看起来像这样：

        $(self).before(filename);
        $(self).wrap(wrapper);

查看实际操作：http://jsfiddle.net/2Xv2e/

Answer 2

$(this).parent().after('<p><input type="file" name="" id="" /></p>');

     $('input[type=file]').filestyle({ 
         image: "choose-file.gif",
         imageheight : 22,
         imagewidth : 82,
         width : 250
     });

Answer 3

交换订单...首先附加然后绑定插件。

 $('#add').live('click',function() {
       $(this).parent().append('<p><input type="file" name="" id="" /></p>');

      $("input[type=file]").filestyle({ 
           image: "choose-file.gif",
           imageheight : 22,
           imagewidth : 82,
           width : 250
       });



    });

Answer 4

使用jQuery Filestyle更容易。 http://markusslima.github.io/jquery-filestyle/

$(":file").jfilestyle({
   input: false,
   theme: "dark",
   iconName: "icon-plus",
   size: "250px"
});