Question

我有这个代码，它在已经创建的div上运行良好

$('.MyDivs').click(function(){
      $('#OtherDiv').css('display','block');
}).mouseleave(function(){
      $('#OtherDiv').css({ display: 'none' });
});

但不适用于动态创建的新Div。我知道Jquery有一个 .on 方法用于动态创建的div，但不知道如何用它绑定2个事件。我试过这样的事情

$(document).on('click', '.MyDivs', function()
{
     $('#OtherDiv').css('display','block');
}).mouseleave(function(){
     $('#OtherDiv').css({ display: 'none' });
});

我也试过这个

$(document).on('click', '.MyDivs', function()
{
     $('#OtherDiv').css('display','block');
});
$(document).on('mouseleave', '.MyDivs', function()
{
     $('#OtherDiv').css({ display: 'none' });
});

但不起作用。如何使用.on？

绑定click和mouseleave方法

我的问题

我只想在点击任何包含 .MyDivs 类的div时显示 Otherdiv ，并在鼠标离开时隐藏 Otherdiv .MyDivs div

Answer 1

你可以试试这个。这应该有用。

$(document).on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, ".MyDivs");

Answer 2

您需要为每个链使用on。这应该有效：

$(document).on('click', '.MyDivs', function() {
    $('#OtherDiv').css('display','block');
}).on('mouseleave', '.MyDivs', function() {
    $('#OtherDiv').css('display','none'});
});

或者您可以绑定两个事件并查找event.type，然后根据结果切换div：

$(document).on('click mouseleave', '.MyDivs', function(e) {
    $('#OtherDiv').toggle( e.type == 'click' );
});

如何使用JQuery .on方法绑定2个事件

2 个答案: