Javascript :如何在每个动态添加的div上使用委托
Javascript :如何在每个动态添加的div上使用委托
提问于 2015-08-26 06:46:56
在编写委托函数以使其对每个动态插入的div起作用时，我遇到了语法问题。
容器是“列”，在“列”中，我插入了许多“拖放框”：
<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>因此，在每个“拖放框”中，我都有一个"h2“和一个”dragbox内容“。当我点击"h2“时，我的目标是切换”拖放框内容“。因为"dragbox“是动态插入的，所以我发现需要使用函数”委托“来使其工作：
jQuery click not working for dynamically created items
jquery .delegate and dynamic content
但是，我的问题是，我不知道如何编写它来使每个 "dragbox“具有相同的行为。
以下是我迄今所做的尝试：
$('.column').children('.dragbox').each(function(){
$(this).delegate("h2", "click", function(){
$(this).siblings('.dragbox-content').toggle();
}).end();
});这在静态的"dragbox“上非常好，但是在动态插入的"dragbox”上就不行了。我真的需要使用“每个”函数，因为对于每个"dragbox“，切换事件是独立的。我不希望当我点击其中一个的标题时，所有的拖箱都会切换。
我使用的库是jQuery和jQuery。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-08-26 06:48:48
是否从专栏中委派：
$(".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();这样，我就可以在任何时候进行事件处理初始化，而不必担心内容是否已经准备好了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32229811
复制相关文章
相似问题
腾讯云开发者
