页面加载Ajax后; jQuery不起作用？

I am using ajax to load content from other html documents div#left-column to current div#left-column. Within the div#left-column is a jQuery accordion plugin; that when loaded by ajax, does not work. How can I get this to work? Below is my code :

我正在使用ajax将其他html文档div＃left-column中的内容加载到当前div＃left-column。在div＃left-column中是一个jQuery手风琴插件;当由ajax加载时，不起作用。我怎样才能让它发挥作用？以下是我的代码：

Top of page is loaded with jQuery and ajax script:

页面顶部加载了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;

    });

});

then this snippet is included before </head> tag :

然后在标记之前包含此代码段：

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

My HTML is below :

我的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 is the only framework needed besides the ajax script for this to work. I've read some about the .live click function, but I do not know how to add it so that it works. Please help.

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

Sincerely,

此致

Michael

迈克尔

2 个解决方案

#1

You are applying the tabs function before the data is loaded. So tabs something along the lines of a null or empty set.

您正在加载数据之前应用选项卡功能。因此，在空集或空集的行中标记某些内容。

You need to load the data before applying tabs on it.

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

EDIT:

编辑：

Assuming you are working with jQueryUI tabs.

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

Well there are different ways to do this, the one i would recommend, since you are already dealing with ajax, is the:

那么有不同的方法可以做到这一点，我建议，因为你已经在处理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." );
            }
        }
    });

the ajaxOptions forces the tabs to load via ajax when switching between them.

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>

In the example above you will notice that the tabs are links that have a url and not just an anchor. So for links that have a url the value of the url will be loaded into the tab when it is selected.

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

So you would need a way to link to the text you want loaded but that shouldn't be to hard.

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

#2

A ploblem like yours solved here:

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

jquery not working after ajax call?

ajax调用后jquery无法正常工作？

resources copied by this post:

这篇文章复制的资源：

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

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/live/

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

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

#1