Применить настройки плагина файла стиля jQuery для вновь созданных элементов

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

Поменяйте порядок ... добавьте сначала, затем привяжите плагин.

$('#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 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

Оказывается, что основной проблемой является плагин. Он обертывает предоставленный элемент в div, который установлен в display: inline, поэтому все новые элементы файла являются встроенными.

Единственный способ исправить это - изменить плагин, чтобы добавить внешнюю оболочку (например, p, которую вы пытаетесь сделать). Скачать non minified plugin и найти код, который выглядит следующим образом:

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

затем сделать его выглядеть следующим образом:

 $(self).wrap("<p/>"); 
     $(self).before(filename); 
     $(self).wrap(wrapper); 

в действии: http://jsfiddle.net/2Xv2e/

Answer 4

Использование JQuery Filestyle более легко. http://markusslima.github.io/jquery-filestyle/

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