我试图动态加载的产品信息，具有用于用户浏览一个手风琴菜单的页。我带来的动态地使用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的和申报单的正常块。

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.

另外，您可以尝试移动手风琴（）打电话给你的成功回调里面，像这样：

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
 });
}

不过，我有更多的成功与previous方法，无论出于何种原因。

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