После загрузки страницы с помощью 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;

    });

});

, затем этот фрагмент включен перед тегом </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

Вы применяете функцию вкладок перед загрузкой данных. Так что вставьте что-нибудь в строку с нулевым или пустым множеством.

Вам необходимо загрузить данные перед применением к ним вкладок.

EDIT:

Предполагается, что вы работаете с вкладками 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-адреса будет загружено во вкладку при его выборе.

Так что вам нужен способ ссылки на текст, который вы хотите загрузить, но это не должно быть слишком сложно.

Answer 2

Проблема, подобная вашей, решена здесь:

jquery не работает после вызова ajax?

ресурсов, скопированных этим постом:

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/