Как динамически добавить рабочие входные данные

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")
    })
});

Теперь я хочу, чтобы каждый раз, когда пользователь нажимал кнопку "Добавить больше", идентификатор и класс файла типа ввода должны быть изменены на уникальные, некоторые могут подумать, почему я это делаю, потому что плагин dropify не работает после клонирования., но когда я дал ему уникальный идентификатор и класс, он начал работать, вот что я попробовал:

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 все еще один и тот же, я не могу произвести клон более одного.

Как я могу изменить идентификатор и класс каждый раз, когда пользователь нажимает на него? Есть ли способ лучше?

Answer 1

Рабочая скрипка.

Проблема: вы клонируете div, который содержит уже инициализированный ввод dropify и который создает конфликт, когда вы пытаетесь клонировать его и повторно инициализировать после клонирования во второй раз.

Решение: Создайте div модели для div, который вы хотите клонировать без добавления dropify класс, чтобы предотвратить $('.dropify').dropify() от инициализации ввода, а затем добавить класс dropify во время клона.

Код модели:

<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();
}

Надеюсь это поможет.

Answer 2

Попробуйте добавить один класс ко всем входам dropify (например, "dropify"). Затем вы можете установить идентификатор каждого элемента на сгенерированное значение, используя это:

inputToAdd.attr('id', 'dropify-input-' + $('.dropify').length );

Каждый раз, когда вы добавляете еще одну кнопку, $('. Dropify'). Length будет увеличиваться на 1, чтобы у вас и у вас был уникальный идентификатор для каждой кнопки.

Answer 3

Это делает то, что вы указали в примере, отличном от вашего:

<div id="template"><span>...</span></div>
<script>
function appendrow () {
html = $('#template').html();
var $last = $('.copy').last();
var lastId;
if($last.length > 0) {
    lastId = parseInt($('.copy').last().prop('id').substr(3));
} else {
    lastId = -1;
}
$copy = $(html);
$copy.prop('id', 'row' + (lastId + 1));
$copy.addClass('copy');
if(lastId < 0)
    $copy.insertAfter('#template');
else
    $copy.insertAfter("#row" + lastId);
}

appendrow();
appendrow();
appendrow();
</script>

Answer 4

Попробуй это:

$(function() {
  $(document).on("click", ".btn-duplicator", function(a) {
    a.preventDefault();
    var b = $(this).parent(".duplicateable-content"),
      c = b.clone(true, true);
    c.find(".dropify").removeClass('dropify').addClass('cropify')
      .attr('id', b.find('[type="file"]')[0].id + $(".btn-duplicator").index(this)) //<here
    $(c).insertBefore(b);
    var d = b.prev(".duplicateable-content");
    d.fadeIn(600).removeClass("duplicateable-content")
  })
});

скрипка