Tag: 事件委托

1.7.2中的jQuery事件委托

有没有办法使用jQuery委托一个事件,该事件将对应于页面上与选择器匹配的所有元素,而不是从$(document)委托? 既然这可能措辞不好,这就是问题: 曾经有jQuery.live将事件委托给匹配选择器的所有元素。 这被jQuery.delegate取代,后者将特定上下文选择器中的事件委托给它的子jQuery.on ,后者又被jQuery.on取代, jQuery.on实际上有相同的function,但在幕后有不同的位(我想象)。 我想要做的是,安全地为我页面上的每个div.foo添加一个事件处理程序,无论它在哪里,或者它可能存在。 根据文档和实证研究,以下内容仅绑定脚本运行时存在的.foo元素。 由于代码可能会在页面上放置.foo元素,因此这并不完全有效。 jQuery(‘.foo’).on(‘click’, handler); 由于live已弃用(可能已删除?),我试图不使用它,但我能想出的唯一解决方案是 jQuery(document).on(‘click’, ‘.foo’, handler); 但这不是live幕后的活动吗? 更重要的是,有没有重要的理由不这样做? 我们专门使用1.7.2版本,但通用的jQuery答案也会有所帮助。

在动态生成的输入上委派typeahead

我有一个html表,我用来输入库存详细信息。在这个表中我有一个产品名称的输入框,我绑定了bootstrap的typeahead事件。但问题是第一行输入框已经是当它呈现在页面上时,typeahead工作正常。但是当我为更多条目添加新行时,typeahead不适用于它们。我知道事件委托的概念但问题是我不知道怎么做我在这种情况下实现它。通过这个指导我。 提前致谢。 这是我的html表 – Product name Amount 这是用于添加新行的javascript- $(function(){ $(‘#add’).click(function(){ addnewrow(); }); }); function addnewrow(){ var tr = ”+ ”+ ”+ ”; $(‘.details’).append(tr); } 这是我如何使用typeahead- $(function(){ $(‘#items’).typeahead({ source: function(query,process){ $.ajax({ url: ‘itemexist.php’, type: ‘POST’, data: ‘query=’ +query, dataType: ‘JSON’, async: true, success: function(data){ process(data); } }); } }); }); 我知道之前已经问过这个问题,但是没有可接受的解决方案,我已经尝试过这些解决方案,但它没有用。 这是我尝试过的,但它似乎似乎没有工作 – $(document).on(“keypress”,”.items”,function(){ $(‘.items’).typeahead({ source: […]

动态绑定事件处理程序的最有效方法

问题:我需要在动态运行时将任意数量的事件处理程序绑定到任意数量的元素(DOM节点, window , document ),并且我需要能够在我的生命周期内更新动态创建(或销毁)节点的事件绑定。页。 我可以看到有三个选项来解决这个问题: I) window事件委托 II)每个节点上的直接事件绑定 III)共同祖先的事件委托(直到运行时才会知道,并且在DOM被更改时可能需要重新计算) 这样做最有效的方法是什么? 一点背景 我正在处理一组需要对用户事件进行分析跟踪(点击,滚动等)的页面,我希望能够在一堆页面中轻松配置这些事件处理程序,而无需编写脚本来处理事件每个实例的绑定。 此外,因为我可能需要在将来跟踪新事件,或者跟踪动态添加到页面/从页面中删除的元素上的事件,我需要能够考虑在生命周期中发生的DOM中的更改的页面。 作为我目前正在考虑的一个例子,我想创建一个接受配置对象的函数,该对象允许程序员为每个事件指定默认处理程序,并允许它们为特定元素覆盖它们: Analytics.init({ // default handlers for each event type defaultHandlers: { “click”: function(e) { … }, “focus”: function(e) { … } }, // elements to listen to targetElements: { // it should work with non-DOM nodes like ‘window’ and ‘document’ window: […]

jQuery委托对大型列表上的click事件的性能 – 如果动态添加更多元素,速度会降低吗?

我有一个像这样的项目的可视列表: http://jsfiddle.net/viatropos/XCe3T/1/ 在真正的应用程序中,我只加载了200个项目。 但问题是,即使只有200个项目, click事件也需要几秒钟来调用处理程序。 无论列表中有多少项, mouseover事件回调都会立即执行。 我的问题是,无论页面上有多少元素,委托方法是否应该同样快? 我所做的就是: $(“body”).delegate(“a”, “click”, function(event) { console.log($(event.target).get(0)); return false; } 如果您转到上面的jsfiddle示例和Web检查器,并单击渲染结果中的链接,它将再添加200个元素。 注意你添加的元素越多,它得到的速度就越慢。 奇怪的是,如果你从6000个项目开始,委托/点击执行的速度比你从2000年开始要快得多,并且一次增加200个,直到达到6000。 您有什么想法,如何提高jQuery delegate方法对click事件的性能? css会导致这种情况变慢(可能是太多样式还是未经优化的布局)?

删除特定对象上的jQuery委托事件处理程序

我已使用单个选择器将委派的事件处理程序附加到页面上的许多元素。 当事件是针对单个元素触发的时候,我想基于某些条件逻辑关闭该元素的事件处理程序。 这意味着我不一定要在第一次点击时禁用该事件 。 但我无法弄清楚如何在不关闭所有这些的情况下做到这一点。 HTML: One Two Three JS: $(document).on(‘click’, ‘button’, function(ev) { // doesn’t work because argument needs to be a string $(document).off(‘click’, $(ev.target)); // doesn’t do what I want b/c turns off events on all buttons, not just this one $(document).off(‘click’, ‘button’); // doesn’t work because event is on document, not button […]