jquery - 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

手风琴功能是否不期望<h3>在

<div id="accordion"> tag

例子：

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

Answer 2

对于动态生成的元素，应该委托事件，可以使用on方法：

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

请注意，toggle事件已弃用。