Question

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

http://208.79.237.222/calendar/

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

我遇到的问题是日历表中的弹出链接。首次加载页面时（http://208.79.237.222/calendar/），链接按预期完美运行，以彩色模式打开。

但是，使用ajax日历来回点击几个月后，然后单击日历表中的一个链接，颜色框模式除了显示黑色大屏幕外什么也没有显示。

非常奇怪，我将.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性能下降。

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

3 个答案: