jQuery 1.7+中的jQuery livequery插件等价物
有没有等同于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/绑定/委托都需要将事件作为params传入。
这是在document.ready时为页面上存在的DOM元素找到的，但是当我更新DOM (AJAX、JS等)时。我希望任何具有类.js-test的新元素也绑定它的事件。
livequery插件(这是旧的，来自jQuery 1.3次)似乎允许这样做，因为它很简单，只需要一个选择器和一个函数就可以对任何与选择器匹配的东西运行。
谢谢
回答 1
Stack Overflow用户
发布于 2012-05-27 07:27:51
从jQuery 1.7 the on method开始，取代live方法。虽然它没有像您描述的那样简单的传递或匹配选择器的方法，但是可以通过传入data-events的动态值来代替事件类型来实现这一点，只要数据事件值与该事件匹配。
但是，由于传递给on方法的event参数的参数--第一个参数--取自每个data-events属性、匹配元素集中的每个元素，因此我们必须遍历匹配元素的集合，以便分别访问每个元素的单独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的委托性质才有效，第二个参数根据数据事件属性过滤目标元素：
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>");尝试一下：
这里的是一个 ，它演示了经过测试和正常工作的功能。
https://stackoverflow.com/questions/10770359
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号