在jQuery 1.7+中等效的jQuery livequery插件 [英] jQuery livequery plug equivalent in jQuery 1.7+

问题描述

是否有相当于jQuery 1.7+的jQuery livequery插件？

Is there the equivalent of the jQuery livequery plugin for jQuery 1.7+ ?

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

Im trying to dynamically bind events, reading the events a DOM element should bind on based on data-* elements.

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

我想用类<$ c $绑定所有元素c> .js-test 但仅限于 data-events 属性中列出的事件。

I want to bind all elements with class .js-test but only on the events listed in their data-events attribute.

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

jQuery.on/live/bind/delegate all require the events to be passed in as params.

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

This is find for DOM elements that exist on the page when document.ready, however as I update the DOM (AJAX, JS, etc.) I want any new elements with class .js-test to have its events bound as well.

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

the livequery plugin (which is old, from jQuery 1.3 times) seems to allow this, as it simple requires a selector and a function to run against anything that matches the selector.

谢谢

推荐答案

从jQuery 1.7 on 方法取代了live方法。虽然它没有像你描述的那样传递或匹配选择器的简单方法，但可以通过传入 data-events 的动态值来实现这一点。事件类型，只要数据事件值与该事件匹配。

As of jQuery 1.7 the on method, supercedes the live method. While it doesn't have an easy method of passing in or matching selectors like you describe, it is possible to accomplish this by passing in the dynamic value of data-events in place of the event type, as long as the data-event value matches that event.

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

However, since the argument passed into the on method's event parameter -- the first parameter -- is taken from each data-events attribute, from each element in the set of matched elements, we must loop through the collection of matched elements so that we access each elements' individual data-events attribute value separately:

$('.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元素的函数调用。

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

由于你想将所有事件映射到单个函数，这个解决方案满足您的特定要求，并解决您的问题。

Since you want to map all of the events to a single function, this solution meets your specific requirements, and solves your problem.

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

However, should your requirements change and you find you need to map a collection of function events to match each event type, this should get you started:

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的新元素。问题在于方法函数的方式。 上的的委派性质仅在父元素包含在选择器中时才有效，并且仅当选择器被传递到第二个参数时，该参数通过数据过滤目标元素 - events属性：

UPDATE:

This has been tested and does indeed work for new elements added to the div#container. The problem was in the way the on method functions. The delegating nature of on only works if the parent element is included in the selector, and only if a selector is passed into the second parameter, which filters the target elements by data-events attribute:

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将一个项目添加到容器中进行测试：

Additionally, use the following jQuery to add an item to the container to test it:

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

尝试一下：

以下是 jsfiddle ，演示了经过测试和运行的功能。

Here is a jsfiddle that demonstrates the tested and working functionality.

这篇关于在jQuery 1.7+中等效的jQuery livequery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！