在事件回調函數中初始化時，ocupload jQuery插件不起作用？

Question

我正在使用jQuery的ocupload插件來允許我的應用程序的用戶將圖像上傳到我的服務器，而無需刷新頁面。 通常，我對此沒有任何困難，但是我試圖在click事件回調中對其進行初始化，並且它根本無法正常工作。 但是，如果我在點擊事件回調函數完成后嘗試通過將初始化代碼手動輸入到我的js控制台中來對其進行初始化，則它確實可以工作。 有人知道我在這里想念的嗎？

    //Open dialog view for profile picture manipulation
jQuery('#admin_profile_picture_img').bind('click', function(){

    jQuery('#admin_profile_picture_img_dialog').dialog('open');

    //initialize one-click upload for profile picture
    window.myUpload = jQuery('#upload_new').upload({
        name: 'file',
        action: '',
        enctype: 'multipart/form-data',
        params: {},
        autoSubmit: true,
        onSubmit: function(){
            console.log('onSubmit()');
        },
        onComplete: function(){
            console.log('onComplete()');
        },
        onSelect: function(){
            console.log('onSelect()');
        }
    });

    console.log(window.myUpload);

});

編輯 ：

這是此問題附帶的HTML：

<div style="display:none" id="admin_profile_picture_img_dialog">
<img id="preview_profile_pic" src="http://vibecompass.s3.amazonaws.com/vc-images/profile-pics/c3d9262de038c507a9d86fae67145829.png" alt="profile picture" />
<a id="upload_new" href="#" style="background:#39f; font-size: 24px; color: white;">Click here to upload a photo</a>

編輯2 ：

如果將代碼移到對話框的“ open”事件回調中，則會遇到相同的問題。

    //initialize dialog for profile picture selection/crop
jQuery('#admin_profile_picture_img_dialog').dialog({
    draggable: false,
    height: 500,
    width: 500,
    modal: true,
    resizable: false,
    autoOpen: false,
    title: 'modify profile picture',
    open: function(event, ui){
        setTimeout(function() {
            //initialize one-click upload for profile picture
            window.myUpload = jQuery('#upload_new').upload({
                name: 'file',
                action: '',
                enctype: 'multipart/form-data',
                params: {},
                autoSubmit: true,
                onSubmit: function(){
                    console.log('onSubmit()');
                },
                onComplete: function(){
                    console.log('onComplete()');
                },
                onSelect: function(){
                    console.log('onSelect()');
                }
            });
        }, 500);
        console.log('should open');
    }
});

但是再次，如果我嘗試從命令行啟動它，它將按預期工作。

Answer 1

嘗試將無法正常工作的代碼延遲1ms放入setTimeout調用中。 即

//Open dialog view for profile picture manipulation
jQuery('#admin_profile_picture_img').bind('click', function(){

    jQuery('#admin_profile_picture_img_dialog').dialog('open');

    setTimeout(function() {
        //initialize one-click upload for profile picture
        window.myUpload = jQuery('#upload_new').upload({
            name: 'file',
            action: '',
            enctype: 'multipart/form-data',
            params: {},
            autoSubmit: true,
            onSubmit: function(){
                console.log('onSubmit()');
            },
            onComplete: function(){
                console.log('onComplete()');
            },
            onSelect: function(){
                console.log('onSelect()');
            }
        });
    }, 1);
    console.log(window.myUpload);
});

編輯：我的直覺是$("#upload_new")目前尚不存在於代碼中。 它是在對話框的打開事件處理程序中創建的嗎？ 我會嘗試在對話框的打開事件處理程序中初始化上載控件。 或者，您可以嘗試以下方法，這有點極端，但應該可以：

//Open dialog view for profile picture manipulation
jQuery('#admin_profile_picture_img').bind('click', function(){

    jQuery('#admin_profile_picture_img_dialog').dialog('open');

    initializeUpload();

    function initializeUpload() {
        var $uploadNew = jQuery("#upload_new");
        if ($uploadNew.length == 0) {
            setTimeout(initializeUpload, 200);
        }
        else {
            window.myUpload = $uploadNew.upload({
                name: "file",
                ...
            });
        }
    }
}