2017-09-25 194 views
0

我正在爲學習目的構建一個文件上傳器插件,並且我努力讓我的回調以我想要的方式工作。簡而言之,這個小部件在類型爲file的輸入字段上運行。代碼稍微更好地解釋:如何正確觸發jQuery UI自定義事件?

$.widget('ultimatum.uploadify', { 
    create: function() { 
    // Irrelevant code here 
    }, 

    _onChange: function(event) { 
    // Private function that is fired when an "change" event 
    // is triggered by the input. 
    var files = event.target.files; 
    var fileInfo = {}; 

    // When the file processing finish, I want to trigger this custom event: 
    this._trigger("fileready", null, fileInfo); 
    } 
}); 

好吧,這樣做的方式,我能處理像這樣的回調:

$('#upload-files').uploadify({ 
    fileready: function(event, file) { 
    // My code here 
    } 
}); 

的問題是,我想處理此事件,像這樣:

$('#upload-files').uploadify(); 
$('.upload-files').on('fileready', function(event, file) { 
    // My code here. 
}); 

儘管前一種方式工作得很好,但後者並沒有。使用「on」可以以這種方式處理自定義jQuery事件嗎?

+0

我看到'#'在一個選擇器中,'.'在另一個選擇器中。認爲這是一個問題。 – Twisty

回答

0

http://api.jqueryui.com/jQuery.widget/

活動

的所有部件都與他們的各種行爲相關的事件時通知您的狀態正在改變。對於大多數小部件,當觸發事件時,名稱會以小部件名稱和小寫字母作爲前綴。例如,我們可以綁定到進度條的change事件,該事件在值更改時觸發。

$("#elem").bind("progressbarchange", function() {` 
    alert("The value has changed!"); 
}); 

每一事件具有相應的回調,其被公開爲一種選擇。如果我們願意,我們可以掛鉤進度條的change回調,而不是綁定到progressbarchange事件。

$("#elem").progressbar({ 
    change: function() { 
    alert("The value has changed!"); 
    } 
}); 

所有的部件都被實例化時觸發一個創建事件。

所以對你的部件,這將是這樣的:

$('#upload-files').uploadify(); 
$('#upload-files').on('uploadifyfileready', function(event, file) { 
    // My code here. 
}); 

正如我在評論中提到,我認爲$('.upload-files')可能是一個錯字,而正確的選擇是$('#upload-files')