单击 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');
    }
});

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

Delegate event on click on new element created in jQuery

jquery

onclick