Colorbox和jQuery ajax请求的多个实例

我有一个使用colorbox和各种ajax请求的应用程序。有时，我会在colorbox中发生一个ajax请求，该请求将调用另一个加载到colorbox外部的ajax请求。。。我觉得这真的很混乱，这是我的代码，有更好的方法吗？没有多次重新初始化colorbox

   jQuery.fn.initFunctions = function() {



        $(".overlay_box").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            height: 480,
            width: 700,
            scrolling: true,
            title: ' ',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();
            }
        });

        $(".overlay_box_inline").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            height: 480,
            width: 700,
            scrolling: true,
            inline: true,
            title: ' ',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();

            }
        });     

        $(".overlay_box_inline_resize").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            scrolling: true,
            inline: true,
            title: ' ',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();
                $.colorbox.resize();

            }
        });



        $('.remove').click(function(){
                var id = $(this).attr('id');
                $.ajax({
                      url: $(this).attr('href'),
                      success: function(data){
                            $.ajax({
                                  url: "/checkout/ten/"+id,
                                  success: function(data){
                                    $('#ten').html(data);
                                    $(this).initFunctions();
                                  }
                            });
                      }
                });
                return false;
        });
        $('.friends .add').bind('click', function(){
                var id = $(this).attr('id');
                $.ajax({
                      url: $(this).attr('href'),
                      success: function(data){

                            $.colorbox({
                                href: "/checkout/"+id,
                                opacity: 0.40,
                                transition: 'none',
                                speed: 200,
                                height: 480,
                                width: 700,
                                scrolling: true,
                                title: ' ',
                                overlayClose: true,
                                onComplete: function () {
                                    $.ajax({
                                          url: "/checkout/invite/"+id,
                                          success: function(data){
                                            $('#ten_friends').html(data);
                                            $(this).initFunctions();
                                          }
                                    });
                                }
                            });
                      }
                });



        });     



   };

   $(this).initFunctions();

---

第一步可能是重用一个公共选项对象，如下所示：

var defaults = {
  opacity: 0.4,
  speed: 200,
  overlayClose: true
};

$(".overlay_box_inline").colorbox($.extend(defaults, {
  height: 480,
  width: 700
}));

// ... more colorboxes

---

如果每次设置都相同，请按以下方式执行：

jQuery.fn.initFunctions = function() {

    $(".overlay_box, .overlay_box_inline").colorbox({
        opacity: 0.40,
        transition: 'none',
        speed: 200,
        height: 480,
        width: 700,
        scrolling: true,
        title: ' ',
        overlayClose: true,
        onComplete: function () {
            // $(this).initFunctions(); // if you want to reinit another colorbox, you should pass the element as an argument to initFunctions rather than calling this as a blanket initializer for all colorboxes.
        }
    });  
}   

---

ColorBox的设置对象是可公开访问的，因此可以随意更改默认值（而不仅仅是特定的实例值）。例如：

$.colorbox.settings.opacity = 0.4;
$.colorbox.settings.speed = 200;

$(".overlay_box, .overlay_box_inline").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            height: 480,
            width: 700,
            scrolling: true,
            title: ' ',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();
            }
        });

$(".overlay_box_inline").colorbox({inline:true});

或者像Betamos建议的那样扩展对象：

$.extend($.colorbox.settings, {opacity:0.4, speed:200});

此外，还可以通过为元素重新指定colorbox来更新该元素的设置。例如：

$.colorbox.settings.opacity = 0.4;
$.colorbox.settings.speed = 200;

$(".overlay_box, .overlay_box_inline").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            height: 480,
            width: 700,
            scrolling: true,
            title: ' ',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();
            }
        });

$(".overlay_box_inline").colorbox({inline:true});

---

好的，所以问题是当您使用AJAX时，当您在what-ever选择器上调用colorbox方法时，它不在DOM中。请尝试以下方法：

$("body").delegate(".overlay_box, .overlay_box_inline", "click", function (event) {
                    event.preventDefault();
                    $.colorbox({href: $(this).attr("href"),
                           opacity: 0.40,
                           transition: 'none',
                           speed: 200,
                           height: 480,
                           width: 700,
                           scrolling: true,
                           title: 'TheTitle',
                           overlayClose: true});
             });

因为

$（'selector'）.delegate（）

监视一些

“选择器”

的DOM，因此即使通过AJAX调用或任何其他方法将新元素添加到DOM中，也会知道它们已被添加，并将单击事件绑定到它们

---

也不是初始化颜色框并等待，而是等待单击，初始化颜色框，然后立即执行工作。如果加载时间对您很重要，这也将有助于您的加载时间。

这不是无限递归吗？您是对的，没有注意到

onComplete

再次运行相同的init。编辑。