通过ajax引入链接时,jquery colorbox插件会中断

通过ajax引入链接时,jquery colorbox插件会中断,jquery,ajax,jquery-plugins,colorbox,Jquery,Ajax,Jquery Plugins,Colorbox,我正在使用jquery和colorbox构建一个基本的ajax日历。以下是指向正在进行的站点的链接: 当用户单击日历控件中的链接时,脚本通过ajax请求该页面并更新日历 我遇到的问题是日历表中的弹出链接。当您第一次加载页面时(http://208.79.237.222/calendar/),链接按预期完美工作,以色盒模式打开 但是,在使用ajax日历来回单击几个月后,然后单击日历表中的一个链接,colorbox模式只会显示一个大黑屏 非常奇怪,我附加了.colorbox()事件作为ajax回调

我正在使用jquery和colorbox构建一个基本的ajax日历。以下是指向正在进行的站点的链接:

当用户单击日历控件中的链接时,脚本通过ajax请求该页面并更新日历

我遇到的问题是日历表中的弹出链接。当您第一次加载页面时(http://208.79.237.222/calendar/),链接按预期完美工作,以色盒模式打开

但是,在使用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

如果您试图将事件或插件附加到初始页面加载时不存在的元素上,则需要查看是否将事件绑定到未创建或将来(页面加载后)创建的元素上,以及是否有一个名为“附加插件”的插件,用于现在或将来创建的元素。

您也可以“重新绑定”通过ajax接收内容并将其插入页面后的事件。我会尽量避免使用livequery插件,它可能会降低javascript性能。

谢谢大家的帮助,我解决了这个问题

我在每次ajax调用中都包含了jquery和colorbox的脚本


看起来这导致了问题的出现

谢谢,我想这已经是我正在做的事情了,我在上面添加了一些代码示例,用.live()而不是.bind()重新绑定。好的,用live重新绑定和刚开始使用live有什么区别吗?如果不需要,我宁愿不使用插件。我尝试过live,但没有太大的成功,我上面的过程似乎很好,我只是不知道为什么colorbox链接的行为如此奇怪,因为ajax加载的elemsMy问题有点类似,但我不得不将对象重新绑定到colorbox