jQuery切換不起作用

Question

我對JQuery手風琴有一些問題。 我要創建「動態」手風琴，（由「addBtn」的點擊添加新項目）創建 一個新的項目，但切換不適用（適用第一項只）

HTML

<div id="accordion"> 

     <div id="aE"> 
       <div id="aT" class="aT_val"> 
         <h3></h3> 
       </div> 
       <div id="aC" class="aC_val"> 
         <p></p> 
       </div> 
     </div> 

</div> 

JS

var conTit = 'title'; 
var conCont = 'content'; 

var count = 0; 

$('.aC_val').hide(); 

$('.aT_val').toggle(
    function() { 
     $(this).next('.aC_val').show(); 
    }, 
    function() { 
     $(this).next('.aC_val').hide(); 
    } 
); 

$('#addBtn').click(function() { 
     count++; 

     $('#accordion').append('<div id="aE' + count + '"><div id="aT' + count + '" class="aT_val"><h3>' + conTit + '</h3></div><div id="aC' + count + '" class="aC_val"><p>' + conCont + '</p></div></div>'); 

哪裏是錯誤，同事嗎？

Answer 1

對於動態生成的元素，事件應該被委派，您可以使用on方法：

$(document).on('click', '.aT_val', function(){ 
    $(this).next().toggle(); 
}) 

注意toggle事件deprecated。

Answer 2

是否手風琴功能不能指望

<div id="accordion"> tag 

實例後<h3>標籤：

<div id="accordion"> 
    <h3><a href="#"></a>General Variables</h3> 
    <div> 
    </div>