Question

我有一个页面发出一个AJAX请求，并从数据库中返回一些数据，一旦它被重新启动我试图将它附加到div并制作一个手风琴，但是我得到的只是数据返回而没有一旦AJAX运行，这里的手风琴就是我的源代码。（片段）

    <script type="text/javascript">

$(document).ready(function() {
     //accordians for when the AJAX loads the content
     // hides the main_menu as soon as the DOM is ready
     // (a little sooner than page load)
     $('#main_menu').hide();
     // shows the slickbox on clicking the noted link
     $('h3#show-menu a').click(function() {
           $('#main_menu').toggle('slow');
           return false;
     });
    //try and hide the left content when it is null
    $("#left-content:empty").hide();
    //style up the scroll bar
    $('#left-content').jScrollPane();
    //do some AJAX to call the method instead of the browser
    $("a.navlink").click(function (ev) {
        $(this).toggleClass("active");
        ev.preventDefault();
        var id = $(this).attr("id")
        if ($(this).hasClass("active")) {
            $("."+id).remove();
        } else {
             //$(this).toggleClass("active");
             var url = $(this).attr("href");
             $.ajax ({
                 url: url,
                 type: "POST",
                 success : function (html) {
                     $("#accordion").append(html);
                     $('#accordion').accordion({
                         active: 0,
                         header:'h2.Blog'
                     });
                 //alert(accordion())
                 }
             });
            }
         });
       });
</script>
</head>
<body>
<div style="left: -100em; position: absolute; width: 100em;"/>
<div id="wrapper">
<h3 id="show-menu">
</h3>
<div id="main_menu" style="display: block;">
</div>
<div id="left-content-holder">
</div>
<div id="right-content">
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
<h2 class="Blog ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0">
</h2>
<div class="Blog ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 16px;" role="tabpanel">Hello World</div>
</div>
</div>
</div>

正如您所看到的那样，数据被附加到<div id="accordion">，并且所有适当的类都被赋予了应该赋予它手风琴功能的元素，但我什么也得不到。我是否应该从DOM创建手风琴，理论上返回的数据不在HTML中，如果是这样，我将如何进行此操作？

由于

Answer 1

看起来手风琴似乎不喜欢附加在其上的东西。假设您已经启动了手风琴，请尝试在您的成功函数中将html附加到它之前销毁手风琴。

$('#accordion').accordion('destroy');

   before 

$('#accordion').append(html);

然后你就可以重新启动它了。

DOM，Jquery和Accordions

1 个答案: