JQuery UI 手风琴不适用于 AJAX 加载的内容 [英] JQuery UI Accordion not working with AJAX loaded content

问题描述

我正在尝试动态加载产品信息页面，该页面具有供用户浏览的手风琴菜单.单击按钮后，我使用 AJAX 动态引入手风琴的内容.手风琴的 HTML 以其应有的方式显示，但没有执行手风琴方法"来将内容修改为手风琴.

I am attempting to dynamically load a page of product info, that has an accordion menu for the user to browse. I bring in the content for the accordion dynamically using AJAX after a button click. The HTML for the accordion is showing up in the manner that it should, but the accordion "method" isn't being executed to modify the content into an accordion.

进口:

<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 中的手风琴调用:

Accordion Call in the 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 的正常块.

The resultant Markup from the AJAX is correct, but the accordion doesnt display properly, it displays as a normal block of H3's and divs.

推荐答案

有两件事，首先你的脚本末尾有一个额外的 }.

Two things, first you have an extra } at the end of your script.

其次，手风琴内容未正确加载，因为手风琴 DOM 元素尚未加载(它们已在您的 AJAX 调用中加载)，因此将以下内容放入您的 SubMenuItemContent.php 文件中:

Second, the accordion content isn't loaded correctly because the accordion DOM elements are not yet loaded (they are loaded in your AJAX call), so put the following your SubMenuItemContent.php file:

<script>
jQuery(document).ready(function($) {   

 $('.accordion').accordion({
  heightStyle: "content",
  active: false,
  collapsible: true
 });

})
</script>

初始化已加载的手风琴.

to init the accordion that is loaded.

或者，您可以尝试在 success 回调中移动 accordion() 调用，如下所示:

Alternatively you could try moving the accordion() call inside your success callback like so:

success: function(result) {
 menuItemContent.html(result);
 $('.accordion').accordion({
  heightStyle: "content",
  active: false,
  collapsible: true
 });
}

但无论出于何种原因，我使用以前的方法取得了更大的成功.

But I've had more success with the previous method, for whatever reason.

这篇关于JQuery UI 手风琴不适用于 AJAX 加载的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！