2012-11-05 6 views
1

J'utilise jquery-filedrop pour glisser-déposer des fichiers sur mon site, mais j'ai des problèmes avec les dropzones dynamiques. Y a-t-il quelque chose qui ne va pas dans la configuration du code? Le script fonctionne très bien avec les éléments présents lors du chargement de la page, mais il ne fonctionne pas avec les éléments créés dynamiquement.Dropzone dynamiquement ajouté pour FileDrop

voici mon violon avec une configuration simulée. http://jsfiddle.net/seesoe/4qcfK/

et Heres le code js

$(document).ready(function() { 
    $('.cloneMeButton').live('click', function() { 
     $('.cloneMaster').clone().attr('class', 'dropzone').text("Dynamic Dropzone Clone").show().appendTo('body'); 
    }); 

    var dropzone = $('.dropzone'); 

    dropzone.filedrop({ 
     dragOver: function() { 
      $(this).removeClass('dropzone').addClass('dropzone_on'); 
     }, 
     dragLeave: function() { 
      $(this).removeClass('dropzone_on').addClass('dropzone'); 
     }, 
     drop: function() { 
      $(this).removeClass('dropzone_on').addClass('dropzone'); 
     } 
    }); 
});​ 

Répondre

1

solution simple vis à vis, envelopper FileDrop dans une fonction et rappeler sur chaque, ajouter un événement

http://jsfiddle.net/4qcfK/3/

$(document).ready(function() { 
    $('body').on('click', '.cloneMeButton', function() { 
     $clone = $('.cloneMaster').clone(); 
     $clone.text("Dynamic Dropzone Clone").addClass('dropzone').show().appendTo('body'); 
     fileDropIt($clone); 
    }); 

    fileDropIt($('.dropzone')); 

});​ 
Questions connexes