Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Javascript :如何在每个动态添加的div上使用委托

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

Stack Overflow用户
提问于 2015-08-26 06:46:56
回答 1查看 69关注 0票数 0

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

容器是“列”,在“列”中,我插入了许多“拖放框”:

代码语言:javascript
运行
AI代码解释
复制
                            <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“具有相同的行为。

以下是我迄今所做的尝试:

代码语言:javascript
运行
AI代码解释
复制
$('.column').children('.dragbox').each(function(){
            $(this).delegate("h2", "click", function(){
                $(this).siblings('.dragbox-content').toggle();
            }).end();

});

这在静态的"dragbox“上非常好,但是在动态插入的"dragbox”上就不行了。我真的需要使用“每个”函数,因为对于每个"dragbox“,切换事件是独立的。我不希望当我点击其中一个的标题时,所有的拖箱都会切换。

我使用的库是jQuery和jQuery。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-26 06:48:48

是否从专栏中委派:

代码语言:javascript
运行
AI代码解释
复制
$(".column").delegate(".dragbox h2", "click", function() {
    $(this).siblings('.dragbox-content').toggle();
}).end();

对于jQuery的现代版本(从2011年11月发布的1.7版本),您可以使用.on,它类似于.delegate,但参数是切换的:

代码语言:javascript
运行
AI代码解释
复制
$(".column").on("click", ".dragbox h2", function() {
    $(this).siblings('.dragbox-content').toggle();
}).end();

就我个人而言,我试图从文件中做所有的代表团:

代码语言:javascript
运行
AI代码解释
复制
$(document).on("click", ".column .dragbox h2", function() {
    $(this).siblings('.dragbox-content').toggle();
}).end();

这样,我就可以在任何时候进行事件处理初始化,而不必担心内容是否已经准备好了。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32229811

复制
相关文章
Jquery遍历数组之$.inArray()方法介绍
$.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1; $.inArray(value,array)    --value是要查找的值,array是被查找的数组。 使用$.inArray()方法必须注意的点,否则会掉坑 (1)看如下代码: $(function () { var arr=[{"name":"张三"},{"name":"李四"},{"name":"王五"}]; alert($
郑小超.
2018/01/24
1.2K0
jquery判断数组中是否包含某个元素的值_java判断元素是否在数组中
如果arry数组里面存在”C#” 这个字符串则返回该字符串的数组下标,否则返回(不包含在数组中) -1
全栈程序员站长
2022/11/02
6.4K0
[随缘一题]排序数组中的单个元素
因为我发现每日一题太难了,,,总会出现一些加班已经很累了(懒得不想动)的时候,而且周末有事多做两道题都叫做同一天的每日一题也让我这个强迫症贼难受.
呼延十
2019/07/01
2.4K0
js判断数组中是否包含某个指定元素的个数_js 数组包含某个元素
indexOf()完整语法: array.indexOf(item,start)
全栈程序员站长
2022/11/02
11.9K0
jquery 筛选元素(1)
.eq()   减少匹配元素的集合为指定的索引的那一个元素。   .eq(index)     index一个整数,指示元素的位置,以0为基数。   $("li").eq(2).css('background-color', 'red')     //选择第三个元素将其 将其背景变成红色。   .eq(-index)     -index 一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。   $("li").eq(-2).css('background-color'
用户1197315
2018/01/19
1.4K0
怎样从数组中删除给定元素_java数组包含某个元素
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/169528.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/22
5.5K0
怎样从数组中删除给定元素_java数组包含某个元素
java数组返回元素位置_把返回值用数组形式返回java
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/09/30
2.3K0
06-老马jQuery教程-jQuery高级
1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。也就是说:jQuery.fn === jQuery.pro
老马
2018/01/05
2.2K0
jquery 操作DOM元素(1)
.clone()   创建一个匹配的元素集合的深度拷贝。   .clone([withDataAndEvents])     withDataAndEvents (默认为false)       一个Boolean 表示是否会复制元素上的时间处理函数。   .clone([withDataAndEvents][,deepwithDataAndEvents])     withDataAndEvents (默认为false)
用户1197315
2018/01/19
1.4K0
[jQuery学习系列二 ]2-JQuery学习二-数组操作
前言 上一篇内容 已经对于Jquery 有了一些认识, 包括Jquery的选择器和DOM对象, 那么这一篇继续来看下Jquery中很实用的Jquery对于数组的操作. Jquery中对数组的操作大致有以下几种形式: each(迭代), map(转换), grep(筛选), 合并等. 1,迭代(each) jQuery.each( object, callback ) 返回值:Object 说明: 通用例遍方法,可用于例遍对象和数组。 注意: 传入的第一个参数可以是数组或者对象.如果数组,则遍历数组中的每一
一枝花算不算浪漫
2018/05/18
1.2K0
封装数组之包含、搜索和删除元素
前言:在上一小节中我们已经会了如何获取和如何修改数组中的元素,在本小节中我们将继续学习如何判断某个元素是否在数组中存在、查询出某个元素在数组中的位置、以及删除数组中元素等方法的编写。
wfaceboss
2019/04/08
8300
jQuery实用工具类--jQuery基础知识点(3)
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
奋飛
2019/08/15
4870
js判断数组中是否存在某一数值的五种方法
arr_data.indexOf(1); //如果存在返回值的下标,不存在返回-1
IT工作者
2021/12/30
6.6K0
js查询数组或者List类型是否包含某个元素
start:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
yaphetsfang
2020/07/30
7.3K0
06-老马jQuery教程-jQuery高级
根据用户需求,总结文章内容,提供摘要。
老马
2017/12/27
1.9K0
GORM 判断 JSON 数组是否包含某元素
在 MySQL 中,并没有内置的数组数据类型。但是,MySQL 提供了一些可以实现类似数组功能的机制,如使用字符串来存储由逗号分隔的值,使用 JSON 类型来存储数组数据等。
恋喵大鲤鱼
2023/02/23
3.6K0
js 判断数组是否包含某个元素方法集合的原因_怎么判断数组有几个元素
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/02
6.6K0
js中如何判断数组中包含某个特定的值_js数组是否包含某个值
array.includes(searchElement[, fromIndex])
全栈程序员站长
2022/09/27
20K0
SQLite 判断 JSON 数组是否包含某元素
如果想查询 tag 列中包含 love 的所有行,在 MySQL 中有 JSON_CONTAINS 可以使用,比如下面的 SQL:
恋喵大鲤鱼
2023/10/12
8790
JavaScript中字符串与数组的相关操作
如果不包含在数组中,则返回 -1,若是包含,则返回对应元素所在数组中的下标值,该值从0开始;
WindCoder
2018/09/20
1.7K0

相似问题

jQuery.inArray()返回-1,即使它包含数组中的值

34

jQuery inArray()总是返回-1

20

jQuery inArray总是返回-1

60

jQuery $.inArray总是返回-1

13

jQuery .inArray If/Else始终返回-1

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档