JQuery colorbox plugin breaks when links are entered via ajax

Question

I am creating ajax rudimentary calendar using jquery and colorbox. Here is a link to the current site:

http://208.79.237.222/calendar/

When the user clicks on the link in the calendar controls, the script requests this page via ajax and updates the calendar.

The problem I am facing is the pop-up links in the calendar table. When you first load the page (http://208.79.237.222/calendar/), the links work fine, as expected, opening in colorbox modal mode.

However, after several months using the ajax calendar and then clicking on one of the links in the calendar table, the colorbox modal mode shows nothing but a large black screen.

very strange, I am attaching .colorbox () events as part of an ajax callback, so I don't know how this can happen

any help would be appreciated

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

    // get the calendar data from the link 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

Answer 1

thanks for helping the guys, I understood the problem

I included scripts for jquery and colorbox with every ajax call

looks like what caused the problem

Answer 2

, , .live() , ( ), liveQuery , .

Answer 3

You can also "rebuild" the event after receiving the content via ajax and pasting it onto the page. I would avoid the livequery plugin as much as possible , this could lead to a decrease in JavaScript performance.