Question

我正在尝试创建杠杆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 ...

Answer 1

$('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!');
});

<强> Sample example

如果您想要直播活动，那么：

$('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!")
});

<强> Sample example for edit

以及直播活动委派

$('body').on($('.js-test').data('test-events'), '.js-test', function() {
    console.log("hello world!")
});

Answer 2

害怕你不能这样做，因为你需要为jQuery提供DOM元素或事件名称。您可以手动将事件绑定到新的DOM元素，也可以绑定可能在数据测试事件中的所有可能事件（如果您有3-5个事件，所有DOM事件将成为一个愚蠢而缓慢的解决方案）并检查您是否element有其中一个：

$('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!");
});

Answer 3

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

Answer 4

此代码允许您将多个事件处理程序注册为函数数组。它经过测试和运行。请参阅此jsfiddle demo and test cases。

<强> 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>");

提醒：

我注意到您的某个链接同时附加了点击和鼠标悬停。虽然此代码将处理每个链接的多个事件，如上一个测试用例所示，但如果存在鼠标悬停事件，则不会触发click事件。

这不是上述代码中的错误，而是处理事件的方式，如下所示：

// mouseover and mouseout fire, but not the click event
$('#container').on('mouseover mouseout click', '.js-test',function() { alert("afdas " + event.type); });

如何使用jQuery（...）动态绑定到多个事件

4 个答案: