0

我有一系列按钮，每个按钮都会启动一个由“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 调用没有回调。有任何想法吗？

4

0 回答 0