我正在尝试创建杠杆jQuery的.on（）（ex-live（））来绑定多个事件。它适用于document.ready上存在的元素，但如果我在页面加载后动态添加第二个链接，则不会触发我的事件处理程序。
这是有道理的，因为最外层的方法遍历元素，并且doenst侦听新添加的DOM节点等.on（..）是侦听新DOM节点的东西，但需要事件名称参数，我不这样做直到我拥有DOM节点。
看起来像小鸡和鸡蛋的情况。
思考？
<a href="/foo.html" class="js-test" data-test-events="['click', 'mouseover']">Test 1</a>
<a href="/foo.html" class="js-test" data-test-events="['mouseout']">Test 2</a>
$(function() {
$('.js-test').each(function() {
var $this = $(this);
var e, events = $this.data('test-events');
for(e in events) {
$this.on(events[e], function() {
console.log("hello world!")
});
}
});
});
更新，以下似乎也有效; $（this）似乎没有在正确的范围内。
<a href="/foo.html" class="js-test" data-test-events="click mouseover">Test 1</a>
<a href="/foo.html" class="js-test" data-test-events="mouseout">Test 2</a>
$(function() {
$('.js-test').on($(this).data('test-events'), function() {
// call third party analytics with data pulled of 'this'
});
});
更新1：
我认为我最好的选择是为我想要支持的所有方法创建特殊的.on方法，如下所示：
$(document).on('click', '.js-test[data-test-events~="click"]' function(event) {
record(this, event);
});
$(document).on('mouseover', '.js-test[data-test-events~="mouseover"]', function(event) {
record(this, event);
});
... etc ...
$('a.js-test').on('click mouseover', function(event) {
// you can get event name like following
var eventName = event.type; // return mouseover/ click
console.log(eventName);
// you code
console.log('Hello, World!');
});
示例示例
如果你想要现场活动，那么：
$('body').on('click mouseover', 'a.js-test', function(event) {
// you can get event name like following
var eventName = event.type; // return mouseover/ click
console.log(eventName);
// you code
console.log('Hello, World!');
});
根据你的上一次编辑试试这个：
$('.js-test').on($('.js-test').data('test-events'), function() {
console.log("hello world!")
});
编辑示例
以及现场活动授权
$('body').on($('.js-test').data('test-events'), '.js-test', function() {
console.log("hello world!")
});
害怕你不能这样做，因为你需要提供带有DOM元素或事件名称的jQuery。
您可以手动将事件绑定到新的DOM元素，也可以绑定可能在数据测试事件中的所有可能事件（如果您有3-5个事件，所有DOM事件将成为一个愚蠢而缓慢的解决方案）并检查您是否元素有其中之一：
$('body').on("mouseover click mouseout mouseenter mouseleave", '.js-test', function(e) {
if (!$.inArray(e.type, $(this).data('test-events').split(' '))) {
return;
}
console.log("hello world!");
});
如果要在将匹配元素添加到DOM时触发事件，您可能需要查看livequery - http://docs.jquery.com/Plugins/livequery。
此代码允许您将多个事件处理程序注册为函数数组。它经过测试和运行。看到这个 jsfiddle演示和测试用例。
JavaScript的：
$(document).ready(function() {
eventFnArray = [];
eventFnArray["click"] = function(e) {
if(e.type != "click") return ;
alert("click event fired - do xyz here");
// do xyz
};
eventFnArray["mouseover"] = function(e) {
if(e.type != "mouseover") return ;
alert("mouseover fired - do abc here");
// do abc
};
eventFnArray["mouseout"] = function(e) {
if(e.type != "mouseout") return ;
alert("mouseout fired - do JKL here");
// do JKL
};
$('.js-test').each( (function(fn) {
return function(i) {
if(i != 0) return;
var _that = this;
var events = [];
events = $(_that).attr("data-events").split(" ");
// alert($(_that).attr("data-events") + " : " + events.join(" "));
$(this).parent().on(
events.join(" "),
'.js-test',
function() {
console.info("hello - this is the " + event.type + " event");
// alert("data-events = " + $(this).attr("data-events") + " : event.type = " + event.type);
// delegate to the correct event handler based on the event type
if($(this).attr("data-events").indexOf(event.type) != -1)
fn[ event.type ](event);
}
);
}
})(eventFnArray)); // pass function array into closure
});
HTML：
<div id="container">
<a href="#" class="js-test" data-events="click mouseout mouseover">Test 1</a>
<a href="#" class="js-test" data-events="mouseover">Test 2</a>
</div>
测试添加更多元素：
以下是3个测试用例：
// adds a link with the click event attached.
$('#container').append("<a href='#' class='js-test' data-events='click'>TEst333</a>");
// adds a link with the mouseover event
$('#container').append("<a href='#' class='js-test' data-events='mouseover'>TEst444</a>");
// adds a link with mouseout
$('#container').append("<a href='#' class='js-test' data-events='mouseout'>TEs555</a>");
// adds a link with both mouseover and mouseout attached
$('#container').append("<a href='#' class='js-test' data-events='mouseout mouseover'>TEstLast</a>");
// mouseout and click
$('#container').append("<a href='#' class='js-test' data-events='mouseout click'>TEstLastForREAL</a>");
提醒：
我注意到你的一个链接同时附加了点击和鼠标悬停。虽然此代码将处理每个链接的多个事件，如上一个测试用例所示，但如果存在mouseover事件，则不会触发click事件。
这不是上述代码中的错误，而是处理事件的方式，如下所示：
// mouseover and mouseout fire, but not the click event
$('#container').on('mouseover mouseout click', '.js-test',function() { alert("afdas " + event.type); });