2012-11-05 2 views
1

나는 동적 드롭 존에 문제가 있습니다. 그러나 내 사이트에 파일을 드래그 앤 드롭으로 업로드 할 때 jquery-filedrop을 사용하고 있습니다. 코드가 설정되는 방식에 문제가 있습니까? 스크립트는 페이지가로드 될 때 거기에있는 요소와 잘 작동하지만 동적으로 생성 된 요소에서는 작동하지 않습니다.FileDrop에 동적으로 dropzone을 추가했습니다.

여기 모의 설정으로 내 피들입니다. http://jsfiddle.net/seesoe/4qcfK/

및을 heres 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'); 
     } 
    }); 
});​ 

답변

1

간단한 이벤트 추가 기능에 filedrop 포장마다 그것을 기억, 솔루션을 간과

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

});​ 
관련 문제