Question

我有两个问题

我正在尝试打开一个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();
            }
        });

    });

});

我想知道是否有另一种方法可以做到这一点。我不介意彩色盒弹出，然后花时间加载内容。以上版本可以在此网址（http://delivery3.water-7.com/index.php/restaurants/manufacturers/3/Barcelona-Restaurant-&-Winebar/products）进行。

当用户点击添加到购物车时，我也尝试关闭彩盒。但有些原因并没有触发。单击“添加到购物车”时，不会触发$(".cart-link a").click。有没有一种特殊的方法来添加jquery到彩盒内容？

Answer 1

请改为尝试：

$(".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中。

Answer 2

对于你的问题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 */
                }


});
}});

优化colorbox并添加额外的jquery

2 个答案: