html - jQuery 1.7+ 中等效的 jQuery livequery 插件

Question

是否有与 jQuery 1.7+ 对应的 jQuery livequery 插件？

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

<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 类绑定(bind)，但仅限于它们的 data-events 属性中列出的事件。

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

当 document.ready 时，这是针对页面上存在的 DOM 元素查找的，但是当我更新 DOM(AJAX、JS 等)时，我想要任何具有 类的新元素.js-test 也绑定(bind)其事件。

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

Answer 1

截至jQuery 1.7 the on method , 取代 live 方法。虽然它没有像您描述的那样传递或匹配选择器的简单方法，但可以通过传递 data-events 的动态值代替事件类型来实现此目的，如只要数据事件值与该事件匹配。

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

$('.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.");

    });
});

I want all events to be mapped to the same function, but have different events trigger the function call for different DOM elements.

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

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

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 的委托(delegate)性质仅在父元素包含在选择器中时才有效，并且仅在将选择器传递到第二个参数时才起作用，该参数通过数据事件属性过滤目标元素:

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演示了经过测试和工作的功能。