JQuery'Aw Snap!' 在Chrome中,但不会崩溃任何其他浏览器

Question

我在管理管理页面时遇到了一些困难,我不断在Chrome中获得"Aw Snap".

我有一个'商品'管理页面,您可以在其中添加新产品到网站.
如果用户选择"T恤"作为产品类型,则会显示一些新选项.即大小和颜色.

大小只是一个多选框,但单击"添加颜色"会初始化一个阴影框.

阴影框允许用户输入颜色的名称并选择十六进制颜色(通过Wheel Color Picker插件)并上传代表图像(通过Uploadify).提交时,Uploadify脚本上传文件,然后在完成时脚本通过JQuery AJAX将其他颜色信息发送到数据库.

提交按钮脚本:

function add_colour_submit(){
    $('#admin-add-colour-response').text('Processing...').fadeIn(1000);
    $('#admin-add-colour-image').uploadifySettings('scriptData', {
        'title': $('#admin-add-colour-title').val(),
        'hex': $('#admin-add-colour-hex').val(),
        'gender': $('#admin-add-colour-gender').val()
    });
    $('#admin-add-colour-image').uploadifyUpload();
}

上传'完成':

'onComplete': function (event, ID, fileObj, response, data) {
    $("#admin-add-colour-response").fadeTo(200,0.1,function(){
        $("#admin-add-colour-response").html('Complete.').fadeTo(900,1,
            function()
            {
                var responseArray = response.split(',');
                var id = responseArray[0];
                var title = responseArray[1];
                var hex = responseArray[2];
                var gender = responseArray[3];
                parent.get_colour(id, title, hex, gender);
            });
        });
    }

当AJAX操作完成时,反馈消息显示"完成".
在此之后,JQuery代码以编程方式关闭影子框,并在父页面上创建一个表示提交颜色的小div.

使用此方法添加多个的可能性.

获取颜色功能:

function get_colour(id, title, hex, gender){
    $('#sb-nav-close').click(); //trigger shadowbox close
    //create colour object div
    var colourObject = '<div class="colourObject"><div class="colourPreview" style="background:#'+hex+'"></div><div class="colourInfo"> '+title+' / '+gender+'</div><div class="colourRemove"><a href="#" onclick="remove_colour('+id+')">x</a></div</div>'
    var currentList = $('#colour-list').html();
    $('#colour-list').html(currentList+colourObject);

    //re-initialise any shadowbox links in the page
    Shadowbox.init({
        skipSetup: false
    });
    Shadowbox.setup();
}

我的问题是,在上述功能中,也许在影子盒关闭期间,我在Chrome中获得了Aw Snap.以上颜色div的截图是使用Safari制作的,我没有遇到任何问题.

我有几个插件(shadowbox,wheel color picker,uploadify,jquery),所以这些可能会导致错误？

更新.
我刚刚设法在更多浏览器中对此进行测试,这肯定是仅与Chrome相关的问题.

Answer 1

我会通过get_colour函数并开始一次删除一些东西,从重新初始化开始Shadowbox.初始化/设置两次是否有可能打破它.

如果注释掉.init并.setup调用DOES来修复崩溃,那么我将开始研究如何在重新初始化之前完全删除(或取消初始化)Shadowbox.

如果它没有修复它,我将继续向上移动该功能,删除代码,直到你可以阻止它崩溃.

此外,关闭影子箱可能会告诉它在幕后做一堆工作(删除dom元素,以及Shadowbox在其核心内部做的其他任何事情).也许问题在于你正在关闭它,然后告诉它过早地初始化,Chrome仍然坚持对(尚未关闭的)灯箱的引用.

要测试/修复此问题,请尝试完全移动init和setup调用另一个函数,并在手动单击页面上的测试链接时调用它.确保您的get_colour功能首先成功运行并完成.如果它有效,那么你知道这是问题,你需要等待一段时间才能调用.init它.setup.也许您可以在Shadowbox的onClose事件期间调用这两种方法,而不是代码中的其他地方.

问题Asker更新有关解决方案的实施:

以防万一其他人遇到类似的麻烦.最终的解决方案是因为我使用.html()调用操作DOM,而.click()调用似乎仍在进行中.

该解决方案要求我将.click()放在.html()调用之后,如前所述.

//create colour object div
var colourObject = '<div class="colourObject"><div class="colourPreview" style="background:#'+hex+'"></div><div class="colourInfo"> '+title+' / '+gender+'</div><div class="colourRemove"><a href="#" onclick="remove_colour('+id+')">x</a></div</div>'
var currentList = $('#colour-list').html();
$('#colour-list').html(currentList+colourObject);

$('#sb-nav-close').click(); //trigger shadowbox close

它现在可以在所有浏览器中完美运行.

我想这里的教训是不要在任何时候处理太多,我通过外观看重载浏览器.