如何将 jQuery 事件处理程序应用于多个缓存的选择器?

Posted

技术标签:

【中文标题】如何将 jQuery 事件处理程序应用于多个缓存的选择器?【英文标题】:How to apply a jQuery event handler to multiple cached selectors? 【发布时间】:2013-02-04 19:43:47 【问题描述】:

假设我有三个按钮

<button data-action="grow" class="resizeButton">Grow</button>
<button data-action="shrink" class="resizeButton">Shrink</button>
<button id="normalButton">Normal Button</button>

我在变量中有按钮

var $normalButton = $('#normalButton');
var $growButton = $('.resizeButton[data-action="grow"]');
var $shrinkButton = $('.resizeButton[data-action="shrink"]');

现在假设我想将mouseentermouseleaveclick 事件处理程序连接到普通按钮

$normalButton.on(
   mouseenter: function()
       //do some stuff
   ,

   mouseleave: function()
       //reverse some stuff
   ,

   click: function()
       //do some more stuff
   
);

神奇的 jQuery 向导让我们可以完成这项工作。

现在假设我们想将mouseentermouseleaveclick 事件处理程序附加到增长按钮和收缩按钮。这些按钮的处理程序相同,但普通按钮的处理程序不同。

我可以看到有几种方法可以做到这一点,但它们基本上都是相同的想法,只需将它们分配两次,一次分配给第一个按钮,一次分配给下一个按钮。

所以,

var handlers = 
    mouseenter: function()
        //do some different stuff
    ,

    mouseleave: function()
        //reverse some different stuff
    ,

    click: function()
        //do some more different stuff
    
;

$growButton.on(handlers);
$shrinkButton.on(handlers);

$.each([$growButton, $shrinkButton], function(i, el)
    el.on(
        mouseenter: function()
            //do some different stuff
        ,

        mouseleave: function()
            //reverse some different stuff
        ,

        click: function()
            //do some more different stuff
        
    );
);

但我想知道是否有一种语法可以从中创建一个 jQuery 对象,或者只是将处理程序应用于一组缓存的选择器,如 $([$growButton, $shrinkButton]).on(... 或类似的?

【问题讨论】:

【参考方案1】:

你可以使用add方法:

$growButton.add($shrinkButton).on(...)

【讨论】:

除此之外,您可能希望您的代码更加动态,例如,将所有元素推入一个数组,然后将事件应用于所有元素。您可以:只需使用$( arrayOfJqueryObjects ) @gustavohenke 当您可以使用add 时,您为什么要这样做?使用类似var jqObjs = $("#el1"); jqObjs.add($("#el2")); jqObjs.add($("#el3")); 的东西 - 当然,在这种情况下,传递给 add 的各个东西将是现有的 jQuery 对象。它也比处理数组更易于维护。

以上是关于如何将 jQuery 事件处理程序应用于多个缓存的选择器?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery-将处理程序绑定到多个事件

如何获取jQuery中动态添加的元素

jquery unbind()方法 语法

使用 JQuery 将事件处理程序添加到 iframe

充满事件处理程序的巨大文件!如何在 AJAX Web 应用程序中组织大型 jQuery 文件?

如何将事件处理程序绑定到 jQuery 中的实例?