页面加载后用Ajax；jQuery不工作？

我正在使用ajax将其他html文档div#left column中的内容加载到当前div#left column中。在div#left列中有一个jQuery accordion插件；当用ajax加载时，它不起作用。我怎样才能让它工作？下面是我的代码：

页面顶部加载了jQuery和ajax脚本：

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#mega-menu-2 li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #right-column';
            $('#right-column').load(toLoad)
        }                                           
    });

    $('#mega-menu-2 li a').click(function(){

        var toLoad = $(this).attr('href')+' #right-column';
        $('#right-column').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#right-column').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#right-column').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

我的HTML如下：

<div id="right-column" class="span-19 last">
            <!-- accordion -->
            <div id="accordion">
                <h2 class="current">First pane</h2>
                <div class="pane" style="display: block">
                    <img src="images/javascri.png" alt="JavaScript tools" style="float: left; margin: 0 15px 15px 0" />
                    <h3>Lorem ipsum dolor</h3>
                    <p><strong>Fusce semper, nisi nec pellentesque sollicitudin.</strong>
                    </p>
                    <p style="clear: both">Consectetur adipiscing elit. Praesent 
                    bibendum eros ac nulla. Integer vel lacus ac neque viverra ornare. 
                    Nulla id massa nec erat laoreet elementum. Vivamus tristique 
                    auctor odio. Integer mi neque. </p>
                </div>
                <h2>Second pane</h2>
                <div class="pane">
                    <h3>Vestibulum ante ipsum</h3>
                    <p>Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis 
                    id, dolor. Aliquam erat volutpat. Praesent pretium tristique 
                    est. Maecenas nunc lorem, blandit nec, accumsan nec, facilisis 
                    quis, pede. Aliquam erat volutpat. Donec sit amet urna quis 
                    nisi elementum fermentum. </p>
                </div>
                <h2>Third pane</h2>
                <div class="pane">
                    <h3>Curabitur vel dolor</h3>
                    <p>Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum 
                    viverra, purus felis egestas magna, non vulputate libero justo 
                    nec sem. Nullam arcu. Donec pellentesque vestibulum urna. In 
                    mauris odio, fringilla commodo, commodo ac, dignissim ac, augue.
                    </p>
                </div>
            </div>
        </div>
        <!--#right-column-->

第一窗格
同侧阴唇
Fusce semper，nisi nec pellentesque sollicitudin.

奉献精英。普拉森特
比本杜姆·厄罗斯·阿努拉。整流罩是一种特殊的颜色。
这是一种新的元素。特里斯蒂克维瓦姆斯酒店
拍卖人奥迪奥。整数米奈克
第二窗格
同侧前庭
粗直径。Donec dolor lacus，前庭在，静脉曲张在，mollis
身份证，多洛。阿利奎姆·埃拉特·帕特。前三体
美国东部时间。梅塞纳斯·努克·洛雷姆、布兰迪特·内克、阿库姆桑·内克、设施
奎斯，佩德。阿利奎姆·埃拉特·帕特。不要坐在那里
发酵元素尼氏菌

第三窗格
库拉比图尔韦尔多洛酒店
非白蜡树。努拉·亨德雷特，费利斯·奎斯·莱门图姆
维韦拉，普卢斯·费利斯·埃古斯塔斯·麦格纳，非放纵的自由正义者
nec扫描电镜。纳拉姆阿库。Donec pellentesque前庭骨灰盒。在里面
毛里斯·奥迪奥，弗林利亚·康莫多，康莫多ac，达官贵人ac，奥古斯。

jQuery是除了ajax脚本之外唯一需要的框架。我读过一些关于.live click函数的文章，但我不知道如何添加它才能使其工作。请帮忙

真诚地

---

Michael

您正在加载数据之前应用制表符功能。因此，沿着空集合或空集合的线条标记某些内容

在应用选项卡之前，需要加载数据

编辑：

假设您正在使用jQueryUI选项卡

有不同的方法可以做到这一点，我推荐的一种方法，因为您已经在使用ajax了，它是：

$( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo." );
            }
        }
    });

ajaxOptions强制选项卡在它们之间切换时通过ajax加载

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        Some pre-loaded text that will display when the app loads. 
    </div>
</div>

一些预加载的文本将在应用程序加载时显示。

在上面的示例中，您会注意到选项卡是具有url的链接，而不仅仅是锚。因此，对于具有url的链接，url的值将在选中时加载到选项卡中

---

因此，您需要一种链接到要加载的文本的方法，但这并不难。

像您这样的问题在这里得到了解决：

本帖复制的资源：

---

你能给我举个例子吗？我在tabs代码段之前加载ajax脚本。好的，我已经将accordion js代码段移到了content#footer下面，但它仍然不起作用。这就是你的意思吗？我在ajax.js脚本

$（“#accordion”）.live（“单击”，function（）{$（“#accordion”）.tabs（“#accordion div.pane”，{tabs:'h2'，effect:'slide'，initialIndex:null}）之后的顶部运行的accordion.js片段中尝试了这个方法现在它可以工作，但手风琴不能保持打开状态。如何使accordio保持打开状态？我正在尝试使用ajax加载一个div，其中包含一个jQuery选项卡元素，而不是加载选项卡中的内容。我想我们可能在谈论两件不同的事情。很抱歉给你带来了困惑。看到我的问题，你能帮忙吗？好的，在这种情况下，你应该清除选项卡所在的当前div（卸载将有助于内存管理（）.tabs（“销毁”），然后用新的选项卡列表替换div的内容，并再次运行（）选项卡。
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        Some pre-loaded text that will display when the app loads. 
    </div>
</div>