Javascript : 如何在每个动态添加的 div 上使用委托

Question

我在编写委托函数以使其适用于每个动态插入的函数时遇到语法问题 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"。因为 "dragbox" 是动态插入的，所以我发现我需要使用函数 "delegate" 来使其工作：

jQuery click not working for dynamically created items

jquery .delegate and dynamic content

但是，我的问题是我不知道如何编写它才能使 each "dragbox" 具有相同的行为。

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

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

});

这在静态 "dragbox" 上工作得很好，但在动态插入 "dragbox" 上就不行了。我确实需要使用函数 "each"，因为切换事件对于每个 "dragbox" 都是独立的。当我点击其中一个的 header 时，我不希望所有的拖动框都切换。

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

Answer 1

做专栏的委托：

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

对于 jQuery 的现代版本（从 1.7 开始，于 2011 年 11 月发布），您将使用 .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();

这样我就可以随时进行事件处理初始化，而不必担心内容是否准备就绪。

Javascript : 如何在每个动态添加的 div 上使用委托

Javascript : how to use delegate on each dynamically added div

javascript

jquery

jsp

jquery-ui