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>