在事件回调函数中初始化时，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",
                ...
            });
        }
    }
}