问题标签 [event-delegation]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
105 浏览

javascript - 带有不可点击项目的 jQuery .load 加载页面

我的页面中有几个.load,最初一切正常,现在,在后台添加了一些动画后,没有任何效果。页面加载并在我告诉它加载的窗口中看起来很好,但没有什么是可点击的。我有一个带有几个<a>链接的页面,另一个带有一个小表单的页面,它们可以自己正常工作,但是当我使用以下方法将其加载到主页时:

页面加载正常,但没有什么可点击的。我尝试关闭所有背景动画和图像,认为它可能与它有关,但它仍然不起作用。

0 投票
2 回答
2104 浏览

javascript - 使用 jquery 的 .on() 进行触摸事件事件委托

所以我有这个 javascript 代码来监听文档中所有元素的触摸事件。

这很好用,只是我只想在 dataCard( .dataCard) 类的项目及其所有非锚点的子项上侦听这些事件<a>

所以我想如何解决这个问题是通过创建一个 jQuery 选择器,因为我在页面前面使用 jQuery,然后调用.addEventListener()它。那没有用。

这是我尝试过的:

正如我之前提到的那样,它不起作用。我猜是因为 jQuery 和 JS 有时不能很好地混合。

现在,我意识到我还需要将事件委托给.dataCard(那些现在存在的或可能以编程方式创建的)的所有实例。

这是一件好事,因为我现在可以使用带有.on()函数的整个 jQuery 解决方案。

这是我尝试过的:

现在,#main它是稳定的并且将永远存在,它是.dataCard一些存在并且一些将以编程方式添加的 s。

因此,就事件委托而言,这很好用。我的问题是现在这也不起作用。

我认为是因为touchstart, touchmove, touchend, 和touchcancel不是 on 可以识别的 jQuery 事件。

所以我的问题是,我怎样才能做我的第一个代码块所做的(为那些触摸事件添加事件侦听器)只针对.dataCardjQuery 或纯 / vanilla js 中存在并以编程方式创建的所有实例?

0 投票
1 回答
386 浏览

javascript - Hammer JS multi-tocuh 事件中的事件委托不起作用

我正在尝试使用 jQuery's 委托hammer.js 中的多点触控手势事件.on(),但这似乎不起作用。

这有效:

但这不起作用:

如何让多点触控手势事件委托给 jQuery 版本的 Hammer.js?

0 投票
2 回答
2335 浏览

javascript - jQuery 类选择器事件绑定是否将 eventHandler 附加到每个实例?

我正在学习 jQuery,当我读到$('.className').bind('click',function(){})方法时,出现了一个疑问。

className此方法是否将我的事件处理程序附加到DOM 中的每个实例?如果是这样,这将是一个好方法——比如将事件处理程序附加到页面上的许多实例是一种开销,对吗?

还是使用事件委托——比如,处理程序将绑定到某个公共父级,该父级将使用e.target equalTo className并执行单击事件,因此该处理程序仅绑定到一个 DOM 元素?

请帮我理解。谢谢。


还有一个疑问。如果我确实将一个事件附加到每个 dom 元素,那么重载会在哪里生效?它会在执行时对浏览器造成额外的负载,还是会使 dom 变得很重(我的意思是很重,难以解析 dom)?

0 投票
1 回答
134 浏览

javascript - jQuery live 替代方案(只有 on() 吗?)

我正在使用 live() 在 ajax 数据中使用我的函数。

就像:$(".mydiv").live('click', function(){ alert("blablabla"); })

如果我单击“.mydiv”的ajax数据,它工作正常

但是'on'方法不支持这个?

如果“i”来自 ajax 数据,它不起作用。为什么?我该如何解决这个问题?

0 投票
1 回答
413 浏览

javascript - 从经典事件管理转向 JavaScript OOP 中的事件委托

由于对性能和内存节省的考虑开始在开发人员社区中传播开来,因此特定操作的每个处理程序都直接附加到目标元素的旧事件管理正在变得过时。

自从 jQuery用新方法更新了旧的.bind()和方法以允许委托后,事件委托实现有了加速。.live().on()

这决定了一些经验丰富的方法的变化,在哪里使用事件委托需要返工。我正在尝试制定一些最佳实践,同时保持我的库的编码风格,并寻找其他开发人员面临的类似情况以找到答案。

使用带有函数的 OOP 作为构造函数,我通常有这样的对象创建接口:

将对象文字作为参数给出,提供传递的输入的名称和值的干净映射。此代码基础的类可能类似于以下内容:

使用“私有”方法在代码可读性和清洁度方面给了我一些好处(只有有用的方法向用户公开),除了性能上的小幅提升(每个范围解析比局部变量花费更多时间)。但是当谈到事件处理程序时,它与事件委托范式发生冲突。

我想公开我用来在内部与班级中的听众相关联的方法:

然后在外部或另一个代理类中驱动适当的委托,如下所示:

但在我看来这不是最好的方法,在接口中暴露了一个无用的方法失败,所以我尝试了一种方法,让主类直接知道所有信息以自主委托事件,通过接口:

这将允许在类内部继续使用私有方法:

您对此有何做法和建议?
到目前为止,您听说的其他开发人员的主要趋势是什么?

0 投票
1 回答
54 浏览

jquery - 移除绑定元素后维护委托事件绑定

在一个视图中,我有一个无序列表来显示绑定到用户下拉选择的元素。这些列表元素是根据服务器响应动态附加的。

HTML 看起来像:

这些元素都有mouseover,mouseoutclick事件通过

有时,服务器返回一个空查询。在那种情况下,我有

我发现,如果我选择了一个没有要附加到“element_list”的项目的选项,然后选择了一个包含许多附加项目的选项,则委托事件将不起作用。

是否可以在保持绑定到它的相同委托事件的同时删除/读取元素?

仅供参考,我使用的是 jQuery 1.9。

0 投票
1 回答
108 浏览

jquery - Javascript 事件委托

我试图为事件委托重写以下函数:

我重写的所有其他函数都运行良好,但这个没有。这是我写的:

正如你所看到的,我并没有真正改变太多。ul 打开,但不再关闭。我的错误在哪里?

0 投票
1 回答
201 浏览

jquery - jQuery Geniuses - 初始化插件和事件委托

朋友们,

而不是手动初始化每个实例:

我想使用 jQuery 插件(Superfish)的多个(和动态)实例,并使用事件委托对父级进行一次调用来初始化它们:

但这不起作用,即使文档说它现在使用事件委托: http ://users.tpg.com.au/j_birch/plugins/superfish/

最后一个项目符号:“•使用 v1.5.1 的事件委托以获得更高的性能和灵活性。”

任何 jQuery Geniuses 都知道这是怎么回事?

0 投票
2 回答
231 浏览

android - jQuery .on() 不适用于 Android 和 css() 上的长动态内容

我正在尝试将交互绑定到动态加载的链接:

HTML:

JS:

这在桌面上运行良好,在 Android 上的内容很短。

但它不适用于 Android 上较长的内容(Eclipse 上没有 JS 错误)。然而,除了工作页面和非工作页面之间的内容长度之外,我还没有发现任何其他差异。因此,我试图人为地限制内容的长度,然后它就可以正常工作了。

你有什么线索吗?

// 编辑

我更新了代码,因为我在输入这个问题时犯了一些基本错误。这个版本更好地反映了核心问题。

// 编辑

我终于设法找出产生冲突的原因。这是由于加载内容后 div 的 css 更新。如果我使用 Weinre 人为地删除了 height 样式属性,那么链接又可以点击了!