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

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

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

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.

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

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.

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

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.

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

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

非常奇怪,我将.colorbox()事件作为ajax回调的一部分附加,所以我不知道这是怎么回事

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

3 个解决方案

#1

thanks for the help guys, I figured out the problem

感谢帮助人员,我想出了问题所在

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

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

looks like that caused the issue

看起来像是造成了这个问题

#2

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.

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

#3

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.

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

#1