Плагин jquery colorbox ломается, когда ссылки вводятся через ajax - PullRequest
3 голосов
/ 19 октября 2010

Я создаю элементарный календарь ajax, используя jquery и colorbox. Вот ссылка на сайт в процессе:

http://208.79.237.222/calendar/

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

У меня проблема с всплывающими ссылками в таблице календаря. При первой загрузке страницы (http://208.79.237.222/calendar/), ссылки работают отлично, как и ожидалось, открывшись в модале colorbox.

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

очень странно, я присоединяю события .colorbox () как часть обратного вызова ajax, поэтому я не знаю, как это могло произойти

любая помощь будет оценена

function update_cal(evt)
{
    // don't follow the link
    evt.preventDefault();

    // get the calendar data from the link's href of select option value
    // and turn it into an array
    var $tgt = $(evt.target);
    var url_to_get;

    if($tgt.is('a'))
    {
        url_to_get = $tgt.attr('rel');
    }
    else if($tgt.is('select'))
    {
        url_to_get = $tgt.val();
    }

    // empty the calendar and show a loading graphic
    $('#cal-content').css({
        background:'url(/media/interface_img/ajax-load.gif) no-repeat center center',
        height:'500px'
    }).html('');

    // get the content via ajax and add them to the page
    $.get(url_to_get, {},
        function(returned_data)
        {
            $('#large-calendar').html(returned_data);
            // must call this to add events to the newly added ajax elements
            add_cal_events();

            // update select menu
            // var slug- + get_array[5]
            // check if cat filter exists
            // if it does, find out what it says
            // select option for that category
            // return false so don't trigger change event
        }
    );
}


function add_cal_events()
{
    $('#cal-nav-previous').unbind().bind('click.prev', update_cal);
    $('#cal-nav-next').unbind().bind('click.next', update_cal);
    $('#cal-nav-today').unbind().bind('click.today', update_cal);
    $('#cal-view-toggle').unbind().bind('click.view', update_cal);
    $('#cal-print').unbind().bind('click.print', function(evt){
        window.print();
        evt.preventDefault();
    });
    $('#cal-category-select').unbind().bind('change.filter', update_cal);
    $('#cal-category-clear').unbind().bind('click.clear', update_cal);
    $('a.trigger-modal').unbind().colorbox(
        {
            transition  :   'none',
            title       :   false,
            width       :   500,
            height      :   380,
            iframe      :   true,
            photo       :   false,
            //inline        :   true,
            opacity     :   0,
            scrolling   :   true
        }
    );

}





//
// and finally the document.ready
//
$(document).ready(function() {

// Load event handlers for calendar controls
add_cal_events();

}); // end $(documemnt).ready

Ответы [ 3 ]

2 голосов
/ 19 октября 2010

спасибо за помощь, ребята, я разобрался с проблемой

Я включал скрипты для jquery и colorbox при каждом вызове ajax

похоже, что это вызвало проблему

0 голосов
/ 19 октября 2010

Вы также можете «перепривязать» событие после получения содержимого через ajax и вставки его на страницу.Я бы как можно больше избегал плагина livequery , он мог бы снизить производительность вашего JavaScript.

0 голосов
/ 19 октября 2010

Если вы пытаетесь прикрепить события или плагины к элементам, которых нет на момент начальной загрузки страницы, вам нужно изучить .live() для привязки событий к элементам, которые не созданы или в будущем (после загрузки страницы) и плагином liveQuery для добавления плагинов для элементов, созданных сейчас или в будущем.

...