JQuery UI Accordion не работает с загруженным контентом AJAX
Я пытаюсь динамически загрузить страницу с информацией о продукте, в которой есть пользовательское меню для аккордеона. Я добавляю контент для аккордеона динамически, используя AJAX после нажатия кнопки. HTML-код для аккордеона отображается так, как и должно быть, но «метод» аккордеона не выполняется для преобразования содержимого в аккордеон.
Импорт:
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media"screen" />
<link rel="stylesheet" href="css/NewSite.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/development-bundle/ui/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
<script type="text/javascript" src="js/jquery.ModalWindow.js"></script>
Аккордеонный звонок в JQuery:
<script type="text/javascript">
jQuery(document).on('click', '.subMenuItem', function()
{
event.preventDefault();
var subMenuItemID = '#' + $(this).attr('id');
var menuItemContent = $('#MenuItemContent');
var mainCategory = $(this).attr('id').split('xx')[0];
var subCategory = $(this).attr('id').split('xx')[1];
$.ajax({
url: '/php/SubMenuItemContent.php',
data: {
MainCategory: mainCategory,
SubCategory: subCategory
},
success: function(result) {
menuItemContent.html(result);
}
});
$('.accordion').accordion({
heightStyle: "content",
active: false,
collapsible: true
});
}
});
</script>
Результирующая разметка от AJAX правильная, но аккордеон не отображается должным образом, он отображается как обычный блок H3 и div.