Question

我有一系列按钮，每个按钮都启动一个灯箱，由'colorbox'供电。每个灯箱内部都有一个滑块，由'RoyalSlider'提供动力。所有滑块都在外部html文档中，并且每次触发模态时，colorbox都会通过ajax加载它们。你可以在这里看到这个：http://j2designpartnership.com/ob3

不幸的是，colorbox没有在模态框之间切换的方法（如果它是通过ajax提取内容）。我试图想出一个解决方案，允许我从模态中的链接切换每个模态中的内容。目前，在onComplete回调中（当模态完成加载时），我试图通过AJAX将新数据拉入幻灯片。

我的js如下：

$('a[rel="group"]').on('click', function(e) {

    e.preventDefault();

    $.colorbox({

        href: $(this).attr('href'),
        //other arguments
        onComplete: function(e) {

            $('#cboxLoadedContent').find('.royalSlider').royalSlider({
             //all of the arguments here
            }).data('royalSlider');

             $('a.nextSlide').on('click', function(e){
                e.preventDefault();

                var url = $(this).attr('href'); 

                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'html',
                    cache: true,
                    beforeSend: function() {
                        $('#cboxLoadedContent').empty();
                        $('#cboxLoadingGraphic').show();
                    },
                    complete: function() {
                        $('#cboxLoadingGraphic').hide();
                    },
                    success: function(data) {                  
                        $('#cboxLoadedContent').append(data);
                        $('#cboxLoadedContent').find('.royalSlider').royalSlider({same arguments as above}).data('royalSlider');
                    }
                });

            });
        }
    });
});

在每个模态中都有一个锚链接，如下所示：

下一张幻灯片

单击时，它会将新内容加载到模式中，但在该点之后的任何点击中，它都会直接进入href或html页面。这是因为第一个模式正在运行回调，并且正在查找单击事件...但之后它没有查找单击事件，因为ajax调用没有回调。有什么想法吗？

使用Colorbox用ajax替换模态内容

0 个答案: