FileUpload Jquery не работает динамически

Question

Я использую этот FileUpload скрипт: http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/

Там есть это в нем:

$('#upload').fileupload({ 

Моя проблема в том, что я загрузить содержимое динамически, так что я думаю Мне нужно что-то вроде этого (потому что я знаю эту проблему с помощью функции .click()):

$(document).on('fileupload', '#upload', function() { 

Но это не работает. Может ли кто-нибудь мне помочь, как вызвать эту функцию, когда динамически загружается содержимое с формой с id = "upload"?

Было бы здорово!

Answer 1

Возможно, проблема связана с тем, что вы инициализируете $('#upload').fileupload() в document.ready().

Вы должны инициализировать элемент как загрузку файла (выполнить $('#upload').fileupload()) после динамической загрузки содержимого.

Поскольку вы загрузки контента через AJAX на кнопку мыши (согласно комментариям), то код должен быть по следующему:

$(":button").click(function(){ 
$.ajax("url",{ 
    success: function (data){ 
    //code for injecting the element into DOM 
    $('#upload').fileupload(); // initialize it as file upload 
    } 
}); 
}); 

Answer 2

Вы почти правы насчет «мне нужно что-то вроде этого» части - вопрос с вашей попыткой на

$(document).on('fileupload', '#upload', function() { 

является то, что «FileUpload» является not an event which is what .on() is expecting, и именно поэтому он работал для вас с «мышами 'дело, а не здесь.

Вы должны включить assets/js/script.js на свою страницу после того, как элемент $('#upload') будет динамически загружен, чтобы весь контент, необходимый скрипту, существовал до его выполнения. Для этого взгляните на jQuery.getScript() или a simple dom approach и используйте его после кода, который добавляет ваши элементы в dom.

Answer 3

Используйте эту функцию

$(function() { 
     var options = { 
      beforeSubmit: function (formData, jqForm, options) { }, // pre-submit callback 
      success: function (responseText, statusText, xhr, form) { } // post-submit callback 
     }; 
     // bind form using 'ajaxForm' 
     $('#uploadForm').ajaxForm(options); 
    });