javascript - Javascript:如何在每个动态添加的div上使用委托(delegate)

我在编写委托函数以使其适用于每个动态插入的div时遇到语法问题。

容器为“ column”，在“ column”中插入许多“ dragbox”：

                            <div class="dragbox">
                                <h2>Actions
                                    <button type="button">
                                        <i class="fa fa-sort-desc"></i>
                                    </button>
                                </h2>

                                <div class="dragbox-content">
                                    content of the dragbox
                                </div>
                            </div>

因此，在每个“ dragbox”中，我都有一个“ h2”和一个“ dragbox-content”。我的目标是当我单击“ h2”时切换“ dragbox-content”。因为“拖动框”是动态插入的，所以我发现我需要使用功能“委托”来使其工作：

jQuery click not working for dynamically created items

jquery .delegate and dynamic content

但是，我的问题是我不知道如何编写它来使每个“拖动盒”具有相同的行为。

这是我到目前为止尝试过的：

$('.column').children('.dragbox').each(function(){
            $(this).delegate("h2", "click", function(){
                $(this).siblings('.dragbox-content').toggle();
            }).end();

});

这在静态“ dragbox”上效果很好，但在动态插入的“ dragbox”上效果不佳。我真的需要使用功能“每个”，因为切换事件对于每个单个“拖动盒”都是独立的。当我单击其中一个的标题时，我不希望所有拖动框都切换。

我使用的库是jQuery和jQuery-ui。

最佳答案

从列中进行委派：

$(".column").delegate(".dragbox h2", "click", function() {
    $(this).siblings('.dragbox-content').toggle();
}).end();

在现代版本的jQuery（2011年11月发布的1.7版本）中，您将使用.on，它与.delegate相似，但是参数已切换：

$(".column").on("click", ".dragbox h2", function() {
    $(this).siblings('.dragbox-content').toggle();
}).end();

我个人尝试从文档中进行所有委派：

$(document).on("click", ".column .dragbox h2", function() {
    $(this).siblings('.dragbox-content').toggle();
}).end();