Question

JQuery 1. 7+ 是否有等效的 jQuery 活吻插件?

我试图动态地将事件捆绑起来,阅读事件,一个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/lift/bind/delgate 都要求将事件作为参数通过。

这是在页面上 document.ready 时存在的 DOM 元素。然而,当我更新 DOM (AJAX, JS, etc.) 时,我希望任何包含 < code>.js- test 类的新元素也能约束它的事件。

生活查询插件( 旧的, 从 jQuery 1. 3 倍) 似乎允许这样做, 因为它简单要求一个选择器和一个函数来运行与选择器匹配的任何功能。

Answer 1

至于,>jQuery 1.7 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

UPDATE:

此选项已被测试, 并且确实对 div# container 添加到 div # container 的新元素有效。问题在于 < code> on 方法函数的方式。 < code> on 的委托性质只有在父元素包含在选择器中, 并且只有当选择器被传送到第二个参数时, 且该参数通过数据活动属性过滤目标元素 :

<强 > 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>

<% 1 > 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>");

尝试一下:<( )\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

这是一个 < a href=>" "http://jsfiddle.net/SYMnA/" >jsfidle 演示测试和工作功能的

UPDATE:

友情链接