Javascript 优化colorbox并添加额外的jquery

我有两个问题

我试图打开一个jQuery颜色框，但速度非常慢。原因是我试图从不同的页面获取html内容（我不能使用iframe，因为我只需要该页面的一部分）。以下代码可以工作，但单击按钮后需要时间：

$(document).ready(function() {
    $(".cart-link a").click(function(event) {
        $(this).colorbox.close();
    });


    $(".rest-menuitem a").click(function(event) {
        event.preventDefault();
        var result = null;
        var sURL = $(this).attr("href");
        $.colorbox({
            html: function() {
                $.ajax({
                    url: sURL,
                    type: 'get',
                    dataType: 'html',
                    async: false,
                    success: function(data) {
                        result = data;
                    }
                });
                return $(result).find('.product');
            },
            width: '650px',
            height: '10px',
            onComplete: function() {
                $(this).colorbox.resize();
            }
        });

    });

});

我想知道是否有其他方法可以做到这一点。我不介意颜色框弹出，然后花时间加载内容。上面的版本可以在这个url（）上找到

我还尝试在用户单击“添加到购物车”时关闭颜色框。但由于某些原因，它没有被触发<代码>$（“.cart link a”）。当我单击“添加到购物车”时，不会触发单击。是否有特殊的方法将jquery添加到colorbox内容

---

对于你的问题2，你能试试这个吗

$(document).ready(function() {
    $(".cart-link a").live('click',function(event) {
        $(this).colorbox.close();
    });
});

对于你的问题1，它会很慢，因为你从不同的页面获取它。使用不同的逻辑

For your question no 1



 $('selector').colorbox({onLoad: function() { /*Intially load a empty color box with only <div id="contenttoload"></div> (No other html content */
        $.ajax({
            url :'Your url',
            data : {}, //data to send if any
            type : "POST" //or get
            success:function(data){ /*data means the stuff you want to show in color box which you must return from the other page*/
                     $('#contenttoload').html(data); //data should be well formatted i mean add your css,classes etc from the server itself */
                }


});
}});

回答你的第一个问题
$（'selector'）.colorbox（{onLoad:function（）{/*初始加载一个空的颜色框，其中只包含（没有其他html内容）*/
$.ajax({
url:“您的url”，
数据：{}，//要发送的数据（如果有）
键入：“POST”//或get
成功：函数（数据）{/*数据表示您要在颜色框中显示的内容，必须从另一页返回*/
$（'#contenttoload'）.html（data）；//数据的格式应该很好，我的意思是从服务器本身添加css、类等*/
}
});
}});

试试这个：

$(".rest-menuitem a").colorbox({
    href: function(){ 
        return $(this).attr('href') + ' .products';
    },
    width: '650px',
    height: '10px',
    onComplete: function() {
        $(this).colorbox.resize();
    }
});

---

ColorBox使用jQuery的load（）方法进行ajax处理，因此您只需将所需的选择器添加到链接的href。

有没有办法打开ColorBox然后获取？对我来说也很有用。谢谢！