Question

我正在尝试习惯于在jQuery中使用新的正确方法，但是我无法弄清楚如何做一个像原始一样优雅/干燥的“实时”绑定。以前，有了“直播”，我相信你可以这样做，只提一次这个元素：

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

这不太简洁，并重复元素。是否有一种明显更简单的方法来实现这一目标？

Answer 1

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

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

Answer 2

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

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,
});

使用$（document）.on将多个事件绑定到同一个元素

2 个答案: