javascript - 如何动态添加工作 dropify 输入

Question

我有一个表单，当用户单击“添加更多”按钮时，该表单会被克隆。

这就是我的 html 的样子:

<div class="col-xs-12 duplicateable-content">
    <div class="item-block">
        <button class="btn btn-danger btn-float btn-remove">
            <i class="ti-close"></i>
        </button>
        <input type="file" id="drop" class="dropify" data-default-file="https://cdn.example.com/front2/assets/img/logo-default.png" name="sch_logo">
    </div>
    <button class="btn btn-primary btn-duplicator">Add experience</button>
    ...
</div>

这是我的 jquery 部分:

$(function(){ 
    $(".btn-duplicator").on("click", function(a) {
        a.preventDefault();          
        var b = $(this).parent().siblings(".duplicateable-content"),
        c = $("<div>").append(b.clone(true, true)).html();          
        $(c).insertBefore(b);
        var d = b.prev(".duplicateable-content");
        d.fadeIn(600).removeClass("duplicateable-content")
    })
});

现在我希望每次用户单击“添加更多”按钮时，输入类型文件的 id 和类都应该更改为唯一的，有些人可能会想为什么我要这样做，因为 dropify 插件不起作用被克隆后，但是当我给它唯一的 id 和类时，它开始工作，这是我尝试过的:

function randomString(len, an){
    an = an&&an.toLowerCase();
    var str="", i=0, min=an=="a"?10:0, max=an=="n"?10:62;
    for(;i++<len;){
      var r = Math.random()*(max-min)+min <<0;
      str += String.fromCharCode(r+=r>9?r<36?55:61:48);
    }
    return str;
} var ptr = randomString(10, "a");
var className = $('#drop').attr('class');
var cd =    $("#drop").removeClass(className).addClass(ptr);

接下来是我如何启动插件$('.' + ptr).dropify()。

但是因为 id 仍然相同，所以我无法生成多个克隆。

如何在每次用户点击时更改 id 和 class？有更好的办法吗？

Answer 1

<强> Working Fiddle 。

Problem :You're cloning a div that contain already initialized dropify input and that what create the conflict when you're trying to clone it and reinitilize it after clone for the second time.

Solution: Create a model div for the dropify div you want to clone without adding dropify class to prevent $('.dropify').dropify() from initialize the input then add class dropify during the clone.

模型 div 代码:

<div class='hidden'>
    <div class="col-xs-12 duplicateable-content model">
        <div class="item-block">
            <button class="btn btn-danger btn-float btn-remove">
                X
            </button>
            <input type="file" data-default-file="http://www.misterbilingue.com/assets/uploads/fileserver/Company%20Register/game_logo_default_fix.png" name="sch_logo">
        </div>
        <button class="btn btn-primary btn-duplicator">Add experience</button>
    </div>
</div>

JS代码:

$('.dropify').dropify();

$("body").on("click",".btn-duplicator", clone_model);
$("body").on("click",".btn-remove", remove);

//Functions
function clone_model() {
  var b = $(this).parent(".duplicateable-content"),
      c = $(".model").clone(true, true);

  c.removeClass('model');
  c.find('input').addClass('dropify');

  $(b).before(c);
  $('.dropify').dropify();
}

function remove() {
  $(this).closest('.duplicateable-content').remove();
}

希望这有帮助。