Question

我正在尝试动态加载产品信息页面，其中包含一个供用户浏览的手风琴菜单。单击按钮后，我使用AJAX动态输入手风琴的内容。手风琴的HTML以它应该的方式出现，但是手风琴＆＃34;方法＆＃34;没有被执行以将内容修改为手风琴。

进口：

<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：

    <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和div的正常块。

Answer 1

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

其次，手风琴内容未正确加载，因为手风琴DOM元素尚未加载（它们已加载到您的AJAX调用中），因此请将以下SubMenuItemContent.php文件：

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

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

})
</script>

初始化已加载的手风琴。

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

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

但无论出于何种原因，我在之前的方法上取得了更大的成功。

JQuery UI Accordion没有使用AJAX加载的内容

1 个答案: