爲什麼jQueryUI手風琴不適用於ajax調用之後繪製的div？

我有一個簡單的jQueryUI Accordion工作，我填充頁面已經加載。下面的代碼工作正常：爲什麼jQueryUI手風琴不適用於ajax調用之後繪製的div？

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(function(){ 
     $("#ticket-event-list").accordion({ 
      header: '.event', 
      collapsible: true, 
      active: false, 
      animate: {duration: 150} 
     }); 
    }); 

    document.tickets = { 
     "event1": {"title": "First Event", "content": "The first content"}, 
     "event2": {"title": "Second Event", "content": "The second content"} 
    } 

    $.each(document.tickets, function(eventId, eventObj){ 
     var eventHtml = '<div class="event" id="'+eventId+'">'+eventObj.title+'</div><div class="content">'+eventObj.content+'</div>'; 
     $("#ticket-event-list").append(eventHtml); 
    }); 
}); 
</script> 

</head> 
<body> 
    <div id="ticket-event-list"></div> 
</body> 
</html>

如果網頁加載的被插入的HTML是這樣的：

<div id="ticket-event-list" class="ui-accordion ui-widget ui-helper-reset" role="tablist"> 
    <div class="event ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" id="event1" role="tab" aria-controls="ui-id-1" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>First Event</div> 
    <div class="content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-1" aria-labelledby="event1" role="tabpanel" aria-hidden="true" style="display: none; height: 18px;">The first content</div> 
    <div class="event ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" id="event2" role="tab" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Second Event</div> 
    <div class="content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-2" aria-labelledby="event2" role="tabpanel" aria-hidden="true" style="display: none; height: 18px;">The second content</div> 
</div>

與我填充手風琴JSON的應該不過首先從一個API服用。所以我重寫了js，如下所示。請注意，我甚至不使用API調用的結果。我還是用我的JS：

$(document).ready(function(){ 
    $(function(){ 
     $("#ticket-event-list").accordion({ 
      header: '.event', 
      collapsible: true, 
      active: false, 
      animate: {duration: 150} 
     }); 
    }); 

    document.tickets = { 
     "event1": {"title": "First Event", "content": "The first content"}, 
     "event2": {"title": "Second Event", "content": "The second content"} 
    } 

    function requestTicketsByEvent(){ 
     var requestUrl = "{{ url_for('ajax_ticketsByEvent') }}"; 
     var request = $.ajax({ 
      dataType: "json", 
      url: requestUrl, 
      type: "GET" 
     }); 
     return request; 
    } 

    function ticketsByEventCallback(request){ 
     request.done(function(data){ 
      // Note I don't even use the data returned by the call 
      $.each(document.tickets, function(eventId, eventObj){ 
       var eventHtml = '<div class="event" id="'+eventId+'">'+eventObj.title+'</div><div class="content">'+eventObj.content+'</div>'; 
       $("#ticket-event-list").append(eventHtml); 
      }); 
     }); 
    } 

    var request = requestTicketsByEvent(); 
    ticketsByEventCallback(request); 
});

寫JSON但由此產生的HTML是唯一如下：

<div id="ticket-event-list" class="ui-accordion ui-widget ui-helper-reset" role="tablist"> 
    <div class="event" id="event1">First Event</div><div class="content">The first content</div> 
    <div class="event" id="event2">Second Event</div><div class="content">The second content</div> 
</div>

我使用.accordion()方法也試圖後，我得出的html到DOM，但這也沒有幫助。此外，在第一段代碼（工作正常）中，.accordion()方法也被用於之前 html被繪製到DOM。

有人知道API調用爲什麼會阻止手風琴起作用嗎？歡迎所有提示！

來源

2014-11-06 kramer65

調用手風琴的'.destroy（）'方法 - 加載新的html - 重新調用手風琴。 – 2014-11-06 16:11:47

或者，加載新的html - 調用手風琴的'refresh（）'方法。 – 2014-11-06 16:14:47

手風琴無法處理動態添加的內容。嘗試打包destroy中的追加並重新初始化電話：

var accordionOptions = { 
     header: '.event', 
     collapsible: true, 
     active: false, 
     animate: {duration: 150} 
    }; 
$(function(){ 
    $("#ticket-event-list").accordion(accordionOptions); 
}); 

// ... 

    request.done(function(data){ 

     $("#ticket-event-list").accordion("destroy"); 
     // Note I don't even use the data returned by the call 
     $.each(document.tickets, function(eventId, eventObj){ 
      var eventHtml = '<div class="event" id="'+eventId+'">'+eventObj.title+'</div><div class="content">'+eventObj.content+'</div>'; 
      $("#ticket-event-list").append(eventHtml); 
     }); 
     $("#ticket-event-list").accordion(accordionOptions); 
    });

例如，如果延遲追加，你的示例將不起作用：http://jsfiddle.net/7b2eegdh/然後如果重新初始化該部件，它將起作用：http://jsfiddle.net/7b2eegdh/1/

來源

2014-11-06 16:25:43 blgt

爲什麼jQueryUI手風琴不適用於ajax調用之後繪製的div？

回答

相關問題