Question

我遇到了编写委托函数的语法问题，使其适用于每个dynamiccaly插入的div。

容器是＆＃34;列＆＃34;，在＆＃34;列＆＃34;我插入了很多＆＃34; dragbox＆＃34; ：

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

所以在每个＆＃34; dragbox＆＃34;我有一个＆＃34; h2＆＃34;和＃34; dragbox-content＆＃34;。我的目标是切换＆＃34; dragbox-content＆＃34;当我点击＆＃34; h2＆＃34;。因为＆＃34; dragbox＆＃34;动态插入，我发现我需要使用函数＆＃34;委托＆＃34;使它工作：

jQuery click not working for dynamically created items

jquery .delegate and dynamic content

然而，我的问题是，我不知道如何编写它以使每个＆＃34; dragbox＆＃34;有相同的行为。

这是我到目前为止所尝试的内容：

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

});

这对静态＆＃34; dragbox＆＃34;完全正常，但不能动态插入＆＃34; dragbox＆＃34;。我真的需要使用＆＃34;每个＆＃34;因为切换事件对于每个单独的＆＃34; dragbox＆＃34;是独立的。当我点击其中一个的标题时，我不希望所有的鼠标滚轮都切换。

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

Answer 1

来自专栏的代表团：

$(".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();

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

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

1 个答案: