jQuery 1.7+ 中等效的 jQuery livequery 插件

Posted 2023-05-08

【中文标题】jQuery 1.7+ 中等效的 jQuery livequery 插件

【英文标题】：jQuery livequery plug equivalent in jQuery 1.7+

【发布时间】：2012-06-01 23:27:19

【问题描述】：

是否有 jQuery 1.7+ 的 jQuery livequery 插件等效？

我正在尝试动态绑定事件，读取 DOM 元素应基于 data-* 元素绑定的事件。

<a href="#" class="js-test" data-events="click">Test 1</a>
<a href="#" class="js-test" data-events="mouseover">Test 2</a>
 .. etc ..

我想将所有元素与 .js-test 类绑定，但仅限于 data-events 属性中列出的事件。

jQuery.on/live/bind/delegate 都要求将事件作为参数传入。

这是在页面上存在 document.ready 时找到的 DOM 元素，但是当我更新 DOM（AJAX、JS 等）时，我希望任何具有类 .js-test 的新元素也绑定其事件.

livequery 插件（它是旧的，从 jQuery 1.3 时代开始）似乎允许这样做，因为它简单地需要一个选择器和一个函数来针对与选择器匹配的任何东西运行。

【问题讨论】：

您想将相同的函数绑定到所有匹配的元素还是映射函数和事件？

我希望所有事件都映射到同一个函数，但是有不同的事件触发对不同DOM元素的函数调用。

【参考方案1】：

从 jQuery 1.7 the on method 开始，取代 live 方法。虽然它没有像您描述的那样传递或匹配选择器的简单方法，但可以通过传递 data-events 的动态值来代替事件类型来完成此操作，只要数据事件值匹配那个事件。

但是，由于传递给 on 方法的事件参数的参数——第一个参数——取自每个 data-events 属性，从匹配元素集中的每个元素中，我们必须遍历匹配元素的集合这样我们就可以分别访问每个元素的单独 data-events 属性值：

$('.js-test').each(function()  
    $(this).on( $(this).attr("data-events"), function() 

        // event pulled from data-events attribute           
        alert("hello - this event was triggered by the " + $(this).attr("data-events") + " action.");

    );
);

我希望所有事件都映射到同一个函数，但有不同的事件触发对不同 DOM 元素的函数调用。

由于您希望将所有事件映射到单个函数，因此此解决方案可满足您的特定要求并解决您的问题。

但是，如果您的需求发生变化，并且您发现需要映射一组函数事件以匹配每种事件类型，这应该可以帮助您开始：

var eventFnArray = [];
eventFnArray["click"] = function()  
    alert("click event fired - do xyz here");
    // do xyz
;
eventFnArray["mouseover"] = function()  
    alert("mouseover fired - do abc here"); 
    // do abc
;

$('.js-test').each( (function(fn)  

   return function()    
     $(this).on( $(this).attr("data-events"), function() 

        alert("hello - this is the " + $(this).attr("data-events") + " event");

        // delegate to the correct event handler based on the event type
        fn[ $(this).attr("data-events") ]();

     );
   
)(eventFnArray)); // pass function array into closure

更新：

这已经过测试并且确实适用于添加到 div#container 的新元素。问题在于on 方法的运行方式。 on 的委托性质只有在父元素包含在选择器中时才有效，并且只有在选择器被传递到第二个参数时才有效，第二个参数通过 data-events 属性过滤目标元素：

HTML：

<div id="container">
    <a href="#" class="js-test" data-events="click">Test 1</a>
    <a href="#" class="js-test" data-events="mouseover">Test 2</a>
</div>

JavaScript：

$(document).ready(function() 
  $('.js-test').each(function()  
      var _that = this;
      alert($(_that).attr("data-events"));

      $(this).parent().on(
          $(_that).attr("data-events"), 
              '.js-test[data-events="'+ $(_that).attr("data-events") +'"]', 
              function() 

                  // event pulled from data-events attribute           
                  alert("hello - this event was triggered by the " + $(_that).attr("data-events") + " action.");
              
          );
      
  ); 
);

另外，使用下面的 jQuery 向容器中添加一个项目来测试它：

$('#container')
    .append("<a href='#' class='js-test' data-events='mouseover'>Test 3</a>");

试试看：

这是一个 jsfiddle，它演示了经过测试和工作的功能。

【讨论】：

尝试过 - 在那种情况下 $(this) 指的是 htmlDocument。我做不到： $('.js-test').on($'.js-test').data('events'), function() ... );因为每个 .js-test 的 data-events 值可能不同。

帝国，请检查更新。我必须使用每个来确保 $this) 指向它应该指向的内容，即由 js-test 元素标识的特定元素。这适用于我的控制台。

在每个循环的范围内，$(this) 指的是一个特定的元素。如果我在页面完全加载后向页面添加新的“.js-test”（并且 $('.js-test').each 已经运行，则不会绑定事件。

@empire29 - 问题已解决。请检查一下。祝你好运！

eventFnArray 应该是一个对象，而不是数组，因为您使用的是字符串索引，而不是数字索引。