在点击jQuery中创建的新元素时委托事件

Question

我在点击jQuery中创建的新元素时委托一个事件会遇到问题。

我的HTML：

<div id="add">Add row</div>
<form class="form-horizontal" id="list-items">
    <div class="panel-group item">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle">Item number 1</a>
                </h4>
            </div>
            <div class="panel-collapse collapse">
                <div class="panel-body">
                    ...
                </div>
            </div>
        </div>
    </div>
</form>

我的JS：

$('.panel-heading').click(function(){
    if($(this).next('.panel-collapse').hasClass('in')) {
        $(this).next('.panel-collapse').removeClass('in');
    }
    else {
        $(this).next('.panel-collapse').addClass('in');
    }
});

$('#add').click(function() {
    var newRow = $('.item').eq(0).clone();
    $('#list-items').append(newRow);
});

我的问题是创建新元素时，我无法点击它来打开其内容。

请你帮帮我。

感谢。

Answer 1

尝试event delegation，如下所示捕获动态元素的事件：

$('.form-horizontal').on('click','.panel-heading', function(){
    if($(this).next('.panel-collapse').hasClass('in')) {
        $(this).next('.panel-collapse').removeClass('in');
    }
    else {
        $(this).next('.panel-collapse').addClass('in');
    }
});