Question

i’m using jquery-filedrop for drag and drop uploading files to my site, however i am having issues with dynamic dropzones. is there something wrong with the way the code is setup? the script works great with elements that are there when the page is loaded, but it doesn’t work with elements that are dynamically created.

here is my fiddle with a mock setup.
http://jsfiddle.net/seesoe/4qcfK/

and heres the js code

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

Answer 1

simple overlooked solution, wrap filedrop in a function and recall it on every, add event

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'));

});​