jQuery livequery plug equivalent in jQuery 1.7+

南笙酒味 提交于 2019-12-05 07:48:41

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.

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

    });
});

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

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.");
              }
          );
      }
  ); 
});

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

Try it out:

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!