JQuery не работает после частичной перезагрузки страницы AJAX - PullRequest
Новая
       12

JQuery не работает после частичной перезагрузки страницы AJAX

2 голосов
/ 05 февраля 2012

Я использую jquery accordion, и он отлично работает при начальной загрузке страницы, но затем у меня есть несколько ajax-команд, которые перезагружают часть страницы, в основном внутреннее тело страницы.

Когда это происходит,аккордеон нарушен, так как перезагрузка, которую я делаю, просто заменяет innerHTML почти всего поля тела.

Скрипт, который загружает аккордеон, также включен в замененный HTML, но, очевидно, это не помогает.1005 *

Как сохранить (или повторно вызвать) эффект аккордеона после замены innerHTML всей моей страницы? 

<div class="art-Post-inner" id="ajaxWrapper">
        <div id="accordion">
                <h3><a href="#">Skärm 1</a></h3>
                <div>
                    my accordion content
                </div>
        </div>

        <script>

            $(document).ready(function() {
                $( '#accordion' ).accordion({
                    collapsible: true, active: false, autoHeight: false
                });
            });

        </script>

Это искусство, которое полностью заменяется установкой innerHTML для div с помощьюid = ajaxWrapper.

Я надеюсь, вы видите проблему.

Ответы [ 2 ]

3 голосов
/ 28 марта 2015

используйте $ (".selector") .accordion ("refresh");

1 голос
/ 05 февраля 2012

Поместите функцию jquery accordion в обратный вызов успеха запроса .ajax:

Пример: 

var accordionOpts = {
    collapsible: "true",
    active: "false",
    autoHeight: "false"
    };

$('#accordion').accordion(accordionOpts);

$("#replaceContent").click(function() {
    $.ajax({
        type: 'POST',
        cache: false,
        data: {
            html: "<div id='accordion'><h3><a href='#'>Skärm 2</a></h3><div>my accordion content</div></div>"
        },
        url: '/echo/html/',
        success: function(data) {
            $(".art-Post-inner").html(data);
            $('#accordion').accordion(accordionOpts);
        }
    });
});

Fiddle: http://jsfiddle.net/6Scgc/3/

...