在jQuery 1.7+中等效的jQuery livequery插件
是否有相当于jQuery 1.7+的jQuery livequery插件?
我试图动态绑定事件,读取DOM元素应基于data- *元素绑定的事件。
Test 1 Test 2 .. etc ..
我想用类.js-test
绑定所有元素,但仅限于其data-events
属性中列出data-events
。
jQuery.on / live / bind / delegate都要求将事件作为参数传递。
这是找到document.ready时页面上存在的DOM元素,但是当我更新DOM(AJAX,JS等)时,我希望任何带有类.js-test
新元素也可以绑定它的事件。
livequery插件(旧的,来自jQuery 1.3次)似乎允许这样,因为它简单需要一个选择器和一个函数来对抗与选择器匹配的任何东西。
谢谢
从jQuery 1.7开始, on
方法取代了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
方法的function。 on
的委托性质仅在父元素包含在选择器中时才有效,并且仅当选择器传递给第二个参数时,该参数通过data-events属性过滤目标元素:
HTML:
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("Test 3");
试试看:
这是一个演示测试和工作function的jsfiddle 。