как связать 2 события с помощью метода .На JQuery в

Question

У меня есть этот код, который работает большой на уже созданных дивы

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

, но не работает на динамически создаваемые новые дивы. Я знаю, что есть метод .on JQuery для динамически созданных 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' }); 
}); 

, но не работает. Как я могу привязать методы click и mouseleave с помощью .on?

Моя проблема

Я просто хочу, чтобы показать Otherdiv по щелчку любого DIV, который имеет .MyDivs класса и скрыть Otherdiv, когда мышь покидает данный момент .MyDivs ДИВ

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