Загрузка большого содержимого div с помощью jquery ajax call. Аккордеоны внутри загруженного div не работают

Question

У меня по одному аккордеону внутри каждой секции (только одна секция отображается за раз).Все аккордеоны имеют разные идентификаторы, ни один не работает.

$("#accordion1").accordion({
header: "h4", active: false, collapsible: true 
});

$("#accordion2").accordion({
header: "h4", active: false, collapsible: true 
});

Answer 1

Из вашего описания, я думаю, вы делаете что-то вроде этого:

$("#accordion1").accordion({
    header: "h4", active: false, collapsible: true 
});
$("#accordion2").accordion({
    header: "h4", active: false, collapsible: true 
});

// And later on...
$('#section').load('/gimme/accordion1');

А то, что вы загружаете из /gimme/accordion1, содержит #accordion1. Это не сработает, потому что $('#accordion1') смотрит на DOM, когда он вызывается, и не находит #accordion1, чтобы связать что-либо с; позже, когда вы загрузите #accordion1 в DOM, к нему не будет привязан аккордеон, потому что ваш $('#accordion1').accordion(/*...*/) звонок был сделан до того, как был #accordion1.

Вы должны подключить виджет аккордеона, когда HTML-код аккордеона находится в DOM. Любая функция, которую вы используете для загрузки вашего HTML, должна иметь функцию обратного вызова, которая вызывается при загрузке HTML, чтобы вы могли использовать ее для подключения ваших виджетов; например, если вы используете load:

$('#section').load('/gimme/accordion1', function() {
    $("#accordion1").accordion({
        header: "h4", active: false, collapsible: true 
    });
});

Answer 2

Вы должны убедиться, что ваш JavaScript выполняется, когда ваш контент загружается через AJAX.

Рекомендуется заключить ваши функции в знаменитую функцию $(document).ready():

$(function(){
    $('#accordion1').accordion({});
});

$(function(){
    $('#accordion2').accordion({});
});