Question

我们可以使用.on()

将多个事件附加到元素

$('.foo').on({
    'click':function(e){
        // do stuff
    },
    'mouseenter':function(e){
        // do some other stuff
    },
    'mouseleave':function(e){
        // do completely different stuff
    }
});

我们还可以将一个处理程序附加到文档并过滤我们的元素，以便在随后创建的元素上显示事件

$(document).on('click', '.foo', function(e){
    // do stuff
});

是否可以将这些行为结合起来将多个事件绑定到元素和未来元素？

Answer 1

是;

$(document).on({
    'click':function(e){
        // do stuff
    },
    'mouseenter':function(e){
        // do some other stuff
    },
    'mouseleave':function(e){
        // do completely different stuff
    }
}, '.foo');

https://jsfiddle.net/ktybjprh/

这由.on( events [, selector ] [, data ] )签名涵盖，自jQuery 1.7起可用

Answer 2

你可以这样试试

＆＃13;

$(document).on({
    click: function() {
        alert("click")
    },
    mouseenter: function() {
        alert("mouseenter")
    },
    mouseleave: function() {
        alert("mouseleave")
    }
}, ".foo");

＆＃13;

<div class="foo">test</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

＆＃13;

Answer 3

你可以这样做

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <p class="foo" style="height: 30px;width: 40px;">Test</p>
<script>
   $(".foo").on('mouseenter click mouseleave', function (event) {
      alert('ok')
    });
  </script>

动态内容的多个事件处理程序与.on（）

3 个答案: