Question

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

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

<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次）似乎允许这样，因为它简单需要一个选择器和一个函数来对抗与选择器匹配的任何东西。

由于

Answer 1

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

但是，由于参数传递给on方法的事件参数 - 第一个参数 - 来自每个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。

在jQuery 1.7+中等效的jQuery livequery插件

1 个答案:

<强>更新