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

Question

我正在使用 jquery 和 colorbox 构建一个基本的 ajax 日历。这是正在开发的网站的链接：

http://208.79.237.222/calendar/

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

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

但是，在您使用 ajax 日历来回单击几个月后，然后单击日历表中的某个链接后，colorbox modal 只显示一个大黑屏。

很奇怪，我将 .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

Answer 1

感谢各位大神帮忙，问题解决了

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

看起来是这个问题引起的

Answer 2

如果您尝试在初始页面加载时不存在的元素上附加事件或插件，您需要查看 .live() 以将事件绑定到未创建或将来创建的元素（之后页面加载）和一个名为 liveQuery 的插件，用于为现在或将来创建的元素附加插件。

Answer 3

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