从Dropbox获取多个图像后,Jquery执行函数

时间:2015-01-11 12:12:55

标签: jquery asynchronous promise filereader jquery-deferred

我的目标:为在同一个弹出菜单中点击按钮后在引导的弹出菜单中动态创建的多个图像创建点击处理程序

我的问题:图像是通过每个循环从Dropbox异步获取的。在异步操作完成之前,我将用于将点击处理程序绑定到这些图像的代码执行。(因此图像不会附加到dom)。我正在尝试使用JQueries延迟/承诺,但找不到任何适合我需要的示例。

//client = dropbox-client
client.readdir("/" + album, function (error, entries)
{
    if (error) {
        return showError(error); // Something went wrong.
    }

    function createBlobs()
    {

        //console.log("createBlobs(); entries are: " + entries);
        var deferreds = [];
        $.each(entries, function (index, value)
        {

            //get the file from dropbox
            client.readFile("/" + album + "/" + value, {blob: true}, function (error, data)
            {
                if (error) {
                    return handleError(error);
                }
                deferreds.push(
                        showBlob(data, value));

                function showBlob(blob, value)
                {
                    console.log("showblob()...: creating img template for value: " + value);
                    var reader = new FileReader();
                    var defer = $.Deferred();
                    reader.onload = (function (theFile) {
                        return function (e) {
                            var l = "<li class='col-lg-6 col-md-6 col-sm-6 col-xs-12' style='list-style:none; margin-bottom:25px'>\n\
                                    <img src='" + e.target.result + "' width='100%' style='border:5px solid green' \n\
                                        id='bbblob_album_" + album + "_img_" + value + "'></img></li>";
                            list.append(l);
                            defer.resolve();
                        };
                    })(blob);

                    reader.readAsDataURL(blob);
                    return defer.promise();
                }
                ;
            });
        });
        return deferreds;
    }

    var dDone = createBlobs();

    console.log("createBlobs(): returned promise , should now go and implementing clickhandlers");
    $.when.apply(null, dDone).done(function () {
        console.log("showBlob executed for each entry; now executing ladieda()");
        ladieda();
    });

});


function ladieda()
{
    console.log("ladieda()");
    $('.d > ul').children('li').each(function () {
        console.log("inside each (li) of ladieda");
        //alert(this.id); // "this" is the current element in the loop
        $(this).children('img').each(function () {
           //alert(this.id); // "this" is the current element in the loop
            $(this).on('click', function () {
               alert("clicked " + this.id); // "this" is the current element in the loop

            });
        });
    });
}

解决方案(感谢狼)

list.on( "click", "li > img", function( event ) {
    var elem = $( this );

    if ( elem.is( "[id^='bbblob_album_"+album+"_img_"+value+"']" ) ) {
        //elem.attr( "target", "_blank" );
        alert("clicked " + this.id); // "this" is the current element in the loop

    }
});

0 个答案:

没有答案