jquery colorbox plugin breaks when links are brought in via ajax

Question

I'm building a rudimentary ajax calendar using jquery and colorbox. Here's the link to the site in progress:

http://208.79.237.222/calendar/

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

The issue I'm having is with the pop up links in the calendar table. When you first load the page (http://208.79.237.222/calendar/), the links work perfectly as expected, opening up in a colorbox modal.

However, after you click back and forth a few months with the ajax calendar, and then click one of the links in the calendar table, the colorbox modal shows nothing except a big black screen.

very odd, I'm attaching the .colorbox() events as a part of the ajax callback so I don't know how this could be happening

any help would be appreciated

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

Answer 1

If you're trying to attach events or plugins on elements that are not present at the time of the initial page load you need to look into .live() for binding events to elements that are created not or in the future (after page load) and a plugin called liveQuery to attach plugins for elements created now or in the future.

Answer 2

You could also "rebind" the event after receiving the contents via ajax and inserting them into the page. I would avoid the livequery plugin as much as possible, it could make your javascript performance drop.

Answer 3

thanks for the help guys, I figured out the problem

I was including the scripts for jquery and colorbox with every ajax call

looks like that caused the issue