使用 $(document).on 将多个事件绑定到同一个元素答案

【问题标题】：use $(document).on to bind multiple events to the same element使用 $(document).on 将多个事件绑定到同一个元素
【发布时间】：2013-01-22 06:54:23
【问题描述】：

我正在尝试习惯 jQuery 中新的正确做事方式，但我不知道如何进行与原始绑定一样优雅/干燥的“实时”绑定。以前，使用“live”我相信你可以做到这一点，只提到一次元素：

$("#element_id").live("click",function(){
  //stuff
}).live("mouseover", function(){
  //stuff
}).live("mouseout", function(){
  //stuff
});

现在，$(document).on 似乎我需要这样做：

$(document).on("click","#element_id",function(){
  //stuff
}).on("mouseover","#element_id",function(){
  //stuff
}).on("mouseout","#element_id",function(){
  //stuff
});

这不太简洁并且重复了元素。有没有明显更简单的方法来实现这一点？

【问题讨论】：

为什么你还需要一个具有唯一标识符（即它的ID）的元素的委托事件？
@MattiasBuelens 这是一个简化的例子。具体来说，我正在尝试为通过 AJAX 动态加载的表行设置事件，所以我试图不重复 3 次的实际选择器是“#element_id tr”
JQuery .on() method with multiple event handlers to one selector 的可能重复项
那么你应该绑定到#element_id并使用tr作为后代选择器。
@j08691 是的，这看起来可能是重复的。我浏览了至少十几个问题，但没有找到一个！

标签： javascript jquery

【解决方案1】：

如果您的回调需要共享代码，我发现这种方法很有用：

var handler = function ( event ) {

    var $target = $( event.target );

    if ( $target.is( '#element_id' ) ) }

        switch ( event.type ) {
            case 'click':
                // stuff
            break;
            case 'mouseenter':
                // stuff
            break;
            case 'mouseleve':
                // stuff
            break;
        }

    }

};

$( document ).on({
    click: handler,
    mouseenter: handler,
    mouseleave: handler,
});

【讨论】：

【解决方案2】：

$(document).on({
    click: function () {},
    mouseover: function () {},
    mouseout: function () {}
}, '#element_id');

小心使用document；您可能想要使用更具体的选择器。此外，我不一定会说动态加载 ID 元素是不好的做法，但它看起来很可疑。

【讨论】：

谢谢，我的理解是，如果您使用特定的选择器，它将不适用于动态加载的元素，但（文档）会？
@joshuahedlund：第二个参数的意思是“委托”事件。
@joshuahedlund 只要将动态加载的元素附加在“静态”容器中（例如，始终在 DOM 中的 #container），您就可以使用该容器作为绑定源（而不是顶级document)。然后选择器参数过滤由该容器内的后代元素触发的事件。
@joshuahedlund 如果您有任何疑问，文档证实了这一点：api.jquery.com/on -- 见第二种用法