how to bind 2 events with JQuery's .on method - javascript

I have this code which is working great on already created divs
$('.MyDivs').click(function(){
$('#OtherDiv').css('display','block');
}).mouseleave(function(){
$('#OtherDiv').css({ display: 'none' });
});
but does not work on dynamically created new Divs. I know there is a .on method of Jquery for dynamically created divs but do not know how to bind 2 events with it. I tried something like this
$(document).on('click', '.MyDivs', function()
{
$('#OtherDiv').css('display','block');
}).mouseleave(function(){
$('#OtherDiv').css({ display: 'none' });
});
I also tried this
$(document).on('click', '.MyDivs', function()
{
$('#OtherDiv').css('display','block');
});
$(document).on('mouseleave', '.MyDivs', function()
{
$('#OtherDiv').css({ display: 'none' });
});
but does not work. How can I bind click and mouseleave methods with .on?
My Problem
I just want to show Otherdiv on click of any div which has .MyDivs class and hide Otherdiv when mouse leaves currently .MyDivs div

you can try this. This should work.
$(document).on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
}
}, ".MyDivs");

You need to use on for each chain. This should work:
$(document).on('click', '.MyDivs', function() {
$('#OtherDiv').css('display','block');
}).on('mouseleave', '.MyDivs', function() {
$('#OtherDiv').css('display','none'});
});
Or you can bind both events and look for the event.type, then toggle the div depending on the result:
$(document).on('click mouseleave', '.MyDivs', function(e) {
$('#OtherDiv').toggle( e.type == 'click' );
});

Related

Jquery not binding event onload

(function() {
var bgOn;
$(".ContainingBox").on('hover', function() {
function() {
bgOn = $(this).css("background-color");
$(this).css("background-color", "#e5fff8");
}, function() {
$(this).css("background-color", bgOn);
}
});
})();
I want to bind an event for hover. This code worked fine when I did not wrap it in the anonymous function, and used .hover() . However, we have a requirement to not use global variables. So i need to bind the event!
Is this not possible?
Your code has syntax errors, specifically on() does not accept multiple callbacks etc.
Also, there is no native hover event, you should use mouseenter and mouseleave instead
$(".ContainingBox").on({
mouseenter: function() {
$(this).data('bg', $(this).css("background-color"));
$(this).css("background-color", "#e5fff8");
},
mouseleave: function() {
$(this).css("background-color", $(this).data('bg'));
}
});
Using jQuery's data(), and not a single variable, will remember the background color for each element
FIDDLE
try this....
(function() {
var bgOn;
$(".ContainingBox").on('mouseover', function() {
function() {
bgOn = $(this).css("background-color");
$(this).css("background-color", "#e5fff8");
}, function() {
$(this).css("background-color", bgOn);
}
});
})();

Adding jQuery hover out to function

Considering I have the following function notation:
$('a').bind('click hover', function(e)
How can I add actions for hover out, similarly to:
$("a").hover(function() { //hover in stuff here
}, function() {
//hover out stuff here
});
hover doesnt really exist, it is just a shortcut of mouseenter/mouseleave. Just use that :
$('a').bind('click mouseenter mouseleave', function(e){});
Also, in newer version of jQuery, you should use .on instead of .bind().
Also note that this :
$("a").hover(function() { //hover in stuff here
}, function() {
//hover out stuff here
});
is not the same as this :
$('a').bind('mouseenter mouseleave', function(e){});
But the same as
$('a').bind({
mouseenter : function(e){},
mouseleave : function(e){}
});

Show/Hide after a div created dynamically

I use this code to show/display Edit link when mouse hovers over the start div. This div however can be created dynamically and when it's created the code below doesn't work.
$(".start").hover(
function() {
timeclock.utils.displayEdit(this)
},
function() {
timeclock.utils.hideEdit(this)
});
I tried the code below but it doesn't work and it looks wrong. How can I implement $(document).on('hover'.....) to hide/show the Edit link as shown above?
$(document).on("hover", ".start",
function() {
timeclock.utils.displayEdit(this)
},
function() {
timeclock.utils.hideEdit(this)
});
hover() is a shortcut for binding mouseenter and mouseout handlers. Your second example doesn't work because on() doesn't take two functions like that. You bind multiple handlers at once using delegated events like this:
$(document).on({
mouseenter: function () {
timeclock.utils.displayEdit(this);
},
mouseleave: function () {
timeclock.utils.hideEdit(this);
}
}, '.start');
Simple example: http://jsfiddle.net/TRcR9/
There are 2 errors in your code.
1. you should use $(this) instead of this. There is a different between this two.
2. you have to bind the hover again whenever a new div is created.
Your syntax is a little off. You can attach multiple event handlers simultaneously using a plain object.
$(document).on({
mouseenter: function(){
timeclock.utils.displayEdit(this);
},
mouseleave: function(){
timeclock.utils.hideEdit(this);
}
}, ".start");
I've created a Codepen example here: http://cdpn.io/dDewi
The syntax you have is a a little off. Here is a jsfiddle with a working example:
HTML:
<div id="container"></div>
CSS:
#edit { display: none; }
Javascript:
$(function() {
$(document).on(
{
mouseenter: function()
{
$('#edit').show();
},
mouseleave: function()
{
$('#edit').hide();
}
},
'.start'
);
$('#container').prepend('<div class="start">Mouse over me <a id="edit" href="#">edit</a></div>');
});

Jquery on hover not functioning

I'm changing my codes to be compatible with jQuery 1.8 and I'm stuck with this hover which doesn't work. When I used then same thing with a click it worked. Here is my code, can anyone tell me where I'm going wrong?
$(document).on('hover', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function () {
$(this).find('.dropfcnt').hide('blind', function () {
$('.actionfcnt').hide();
});
});
Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
Source: http://api.jquery.com/on/#additional-notes
That pretty much says it all, you cant use "hover" for that:
$(document).on('mouseenter','.top-level', function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level', function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
there is no "hover" event.
there is .hover() function that takes 2 callbacks (as in your example).
Try:
$(".top-level").on({
mouseenter: function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
},
mouseleave: function (event) {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
OR
$(".top_level").on("hover", function(event) {
if(event.type == "mouseenter") {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}
else if (event.type == "mouseleave") {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
.on function has only 3 parameters : http://api.jquery.com/on/
If you don't need your handlers be bound to dynamically added elements as well, then you may use the good old hover function with 2 event handlers.
$('.top-level').hover(function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});​
By the way, $(selector).hover(handlerIn, handlerOut) is shorthand for $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.
If you need to, then use on for mouseenter and mouseleave events:
$(document).on('mouseenter', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});​
Try
$('.top-level').hover(function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}, function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});

on and hover not working together

My jquery code
It's not working when
$("a").on("hover",function(){$(this).css("background","#ccc");},function(){$(this).css("background","#fff")});
But is working when
$("a").hover(function(){$(this).css("background","#ccc");},function(){$(this).css("background","#fff")});
How to make it to work with hover
In case of .on() hover it will look like
$("a").on('hover', function(e) {
if(e.type =='mouseenter') {
// code for mouseenter
} else {
// code for mouseleave
}
});
But for .hover() is accept two functions first one for mouseenter and second one for mouseleave.
$('a').hover(
// for mouseenter
function() {
},
// for mouseleave
function() {
}
);
So if you want to use .on() then your code will:
$("a").on('hover', function(e) {
if(e.type =='mouseenter') {
// code for mouseenter
$(this).css("background","#ccc");
} else {
// code for mouseleave
$(this).css("background","#fff")
}
});
As #ThiefMaster comment if you want to bind mouseenter and mouseleave separately then you can try:
$('a')
.mouseenter(function() {
$(this).css('background', '#ccc');
})
.mouseleave(function() {
$(this).css('background', '#fff');
});
or using .on() you can do
$('a').on({
mouseenter: function() {
$(this).css('background', '#ccc');
},
mouseleave: function() {
$(this).css('background', '#fff');
}
});
Here's a live demo
And the code
$("a").on('hover', function(e) {
if(e.type =='mouseenter') {
// do something when mouse enter
alert("mouse enter");
} else {
// do something when mouse leave
alert("mouse leave");
}
});​
Hover is an shortcut for mouseenter and mouseleave events. So you can bind those using on like
$("a").on({
mouseenter: function(){$(this).css("background","#ccc");},
mouseleave: function(){$(this).css("background","#fff");}
});

Categories

Resources