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

Question

我正在使用 ajax 将其他 html 文档 div#left-column 中的内容加载到当前 div#left-column。在 div#left-column 中是一个 jQuery 手风琴插件；当由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;

    });

});

那么这个sn-p就包含在</head>标签之前：

$(document).ready( function(){
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
    });

我的 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-->

jQuery 是除了 ajax 脚本之外唯一需要的框架。我已经阅读了一些有关 .live click 功能的信息，但我不知道如何添加它以使其正常工作。请帮忙。

此致，

迈克尔

Answer 1

您正在加载数据之前应用选项卡功能。因此，沿空集或空集的行制表符。

您需要在应用标签之前加载数据。

编辑：

假设您正在使用 jQueryUI 选项卡。

嗯，有不同的方法可以做到这一点，我推荐的一种方法是：

$( "#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 的值将在被选中时加载到选项卡中。

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

Answer 2

像你这样的问题在这里解决了：

jquery not working after ajax call?

本帖复制的资源：

http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

http://api.jquery.com/live/

http://api.jquery.com/delegate/