javascript - 无法在 jQuery 中刷新 Accordion

Question

网页最初会有一个按钮。单击它后，它会添加两个 Accordion ，其标题存储在列表中，这是单击事件处理功能的一部分。该按钮应该创建新的 Accordion ，从同一列表中读取内容，无论单击多少次。

<script>
  $(function() {
    $("#updateAccordion").click(function() {
      new_array = ['new_item1', 'new_item2']
      $("#mainAccordion").empty();
      var accordion_data = ''
      for (var i = 0; i < new_array.length; i++) {
        accordion_data += '<h3><a href="#">' + new_array[i] + '</a></h3><div class="accordion">'
        accordion_data += '</div>'
      }

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

</script>
<button id="updateAccordion">Apply</button>

<div class="accordion" id="mainAccordion">
</div>

第一次就按预期工作了。但是，再次单击它时，它不会创建任何 Accordion 。它只是创建链接。

fiddle 可以找到here .

Answer 1

您的程序中发现了几个问题。

• 您没有将 ; 放在表达式末尾。例如 var Accordion_data = ''。
• 如果您想使用 jquery Accordion ，那么您应该使用 jquery.js、jquery-ui.js 和 jquery-ui.css这些库。
• 要更新您的 Accordion ，您应该首先销毁它，然后使用 Accordion 选项重新启动它。

按照下面的代码操作，效果很好。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<script type="text/javascript">



$(function(){
    $('#mainAccordion').accordion({
        heightStyle: 'content',
        active: false,
        collapsible: true
    });
});
  
  
  $(function(){
      $("#updateAccordion").click(function() {
      var new_array = ['new_item1', 'new_item2'];
      $("#mainAccordion").empty();
      var accordion_data = '';
      for (var i = 0; i < new_array.length; i++) {
         accordion_data += '<h3><a href="#">' + new_array[i] + '</a></h3><div class="accordion"><p>this is some text</p></div>';
      }
      var option = {
       heightStyle: 'content',
       active: false,
       collapsible: true
      };

      $("#mainAccordion").append(accordion_data);
      $("#mainAccordion").accordion('destroy').accordion(option);
      
    });
  });
    



</script>
<button id="updateAccordion">Apply</button>
<div id="mainAccordion" class="accordion">
    
	<h3><a href="#">Section 1</a></h3>

    <div>
        <p>Section 1 Content</p>
    </div>
    
	<h3><a href="#">Section 2</a></h3>
	<div>
        <p>Section 2 Content
    </div>
    
	<h3><a href="#">Section 3</a></h3>
	<div>
        <p>Section 3 Content</p>
    </div>
    
	<h3><a href="#">Section 4</a></h3>
	<div>
        <p>Section 4 Content</p>
    </div>
</div>