Несколько экземпляров ajax-запросов Colorbox и jQuery

Question

У меня есть приложение, которое использует colorbox и различные запросы AJAX.Иногда я получаю запрос ajax внутри colorbox, который будет вызывать другой запрос ajax, который загружается за пределы colorbox ... Я чувствую себя очень грязно, вот мой код, есть ли лучший способ сделать это?Без повторной инициализации 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();

Answer 1

Объект настроек ColorBox общедоступен, поэтому не стесняйтесь изменять значения по умолчанию (а не только конкретные значения экземпляров). Пример:

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

Или вытяните объект, как предложил Бетамос:

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

Кроме того, вы можете обновить настройки элемента, переназначив ему colorbox. Пример:

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

Answer 2

Одним из первых шагов может быть повторное использование объекта общих параметров, например:

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

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

// ... more colorboxes

Answer 3

Хорошо, проблема в том, что когда вы выполняете AJAX-то, чего не было в DOM, когда вы вызывали метод colorbox для любого когда-либо селектора.Попробуйте вместо этого:

$("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 некоторого 'selector', поэтому даже когда новые элементы добавляются в DOM с помощью вызова AJAX или любого другого метода, они будут знать, что они 'Вы были добавлены и привязали к ним событие щелчка.

Кроме того, вместо инициализации colorbox и ожидания, он ожидает щелчка, инициализирует поле, а затем немедленно выполняет работу.Это также поможет вам определить время загрузки, если это важно для вас.

Answer 4

Если настройки каждый раз одинаковы, сделайте так:

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