11

我正在尝试创建利用 jQuery 的 .on() (ex-live()) 来绑定多个事件。它适用于 document.ready 上存在的元素，但如果我在页面加载后动态添加第二个链接，则不会触发我的事件处理程序。

这是有道理的，因为最外层的方法会遍历元素，并且不会监听新添加的 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 ...
4

4 回答 4

15 
$('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!")
});
于 2012-05-26T16:29:33.800 回答
1

恐怕您不能这样做，因为您需要为 jQuery 提供 DOM 元素或事件名称。您可以手动将事件绑定到新的 DOM 元素或绑定所有可能在 data-test-events 中的事件（如果您有 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!");
});​
于 2012-05-26T22:20:00.830 回答
0

如果您想在将匹配元素添加到 DOM 时触发事件，您可能需要查看 livequery - http://docs.jquery.com/Plugins/livequery。

于 2012-05-26T23:35:49.663 回答
0

此代码将允许您将多个事件处理程序注册为函数数组。它已经过测试并且可以正常工作。请参阅此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); });
于 2012-05-29T03:55:11.390 回答