As of jQuery 1.7 了on method http://api.jquery.com/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
UPDATE:
这已经过测试,并且确实适用于添加到 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 http://jsfiddle.net/SYMnA/演示了经过测试和工作的功能。