Multiple instances of Colorbox and jQuery ajax requests

I have an app that's using colorbox and various ajax requests. Sometimes, I'll have an ajax request happen within the colorbox that will call another ajax request that loads outside the colorbox... It's getting really messy I feel, here's the code I have, is there a better way to be doing this? Without re-initializing colorbox so many times?

   jQuery.fn.initFunctions = function() {



        $(".overlay_box").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
  开发者_StackOverflow社区          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();

One first step could be to reuse a common options object like this:

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

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

// ... more colorboxes

ColorBox's settings object is publicly accessible, so feel free to change the default values (not just specific instance values). Example:

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

Or extend the object like Betamos suggested:

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

Also, you can update the settings on an element by re-assigning colorbox to it. Example:

$(".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});

If the settings are the same each time, do it like this:

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.
        }
    });  
}   

Okay so the problem is when you AJAX something it wasn't in the DOM when you called the colorbox method on what ever selector. Try this instead:

$("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});
             });

Since $('selector').delegate(); watches the DOM of some 'selector', so even when new elements are added to the DOM via an AJAX call or any other method, this will know they've been added and bind a click event to them.

Also instead of initializing the colorbox and waiting, this waits for a click, initializes the box, then does the work immediately. This will also help with your load times if that's important to ya.