Chrome 中的 JQuery 'Aw Snap!' 但不会导致任何其他浏览器崩溃

Question

我在管理管理页面时遇到了一些困难，在 Chrome 中我经常收到“啊啊啊”的提示。

我有一个“商品”管理页面，您可以在其中向网站添加新产品。
如果用户选择“T 恤”作为产品类型，则会出现一些新选项。即尺寸和颜色。

尺寸只是一个多重选择框，但单击“添加颜色”会初始化一个阴影框。

shadowbox 允许用户输入颜色名称并选择十六进制颜色(通过 Wheel Colour 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();
}

我的问题是，在执行上述函数期间，也许在关闭 Shadowbox 期间，我在 Chrome 中收到“Aw Snap”。上面的颜色 div 的屏幕截图是使用 Safari 制作的，我没有遇到任何问题。

我有几个插件(shadowbox、轮子颜色选择器、uploadify、jquery)，那么这些插件的冲突是否会导致错误？

更新。
我刚刚在更多浏览器中测试了这一点，这绝对是仅与 Chrome 相关的问题。

Answer 1

我会检查 get_colour 函数并开始一次删除一个内容，从重新初始化 Shadowbox 开始。初始化/设置两次可能会破坏它。

如果注释掉 .init 和 .setup 调用确实可以修复崩溃，那么我将开始研究如何完全删除(或取消初始化)您的 Shadowbox在重新初始化它们之前。

如果它不能修复它，我将继续通过该函数向上移动，删除代码，直到您可以阻止它崩溃。

此外，关闭 Shadowbox 可能会告诉它在幕后做大量工作(删除 dom 元素，以及 Shadowbox 在其 JS 核心深处所做的任何其他工作)。也许问题在于您关闭它，然后告诉它过早初始化，而 Chrome 仍然保留对(尚未关闭)灯箱的引用。

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

提问者关于解决方案实现的更新:

以防万一其他人遇到类似的麻烦。最终的解决方案是因为我正在使用 .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

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

我想这里的教训是不要在任何时候处理太多，从事情的外观来看，我使浏览器重载了。