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){}
});
Related
(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);
}
});
})();
The below code works -
$("#x").hover(function() {
alert("hovered");
});
But the below code does not. Please explain why?
$("#x").on("hover", function() {
alert("hovered");
});
Note - #x is a button element. and the above code works for "click" event
From jQuery .on()'s documentation:
Deprecated in jQuery 1.8, removed in 1.9: 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.
You could pass an object to the on method:
$("#x").on({
mouseenter: function() {
// ...
},
mouseleave: function() {
// ...
}
});
And if you want to delegate the events:
$('#aStaticParentOfX').on({
mouseenter: function() {
// ...
},
mouseleave: function() {
// ...
}
}, "#x");
Even the .live() has depricated from jQuery 1.9 if your version is below 1.9 you can use
$("#x").live("hover", function() {
alert("hovered");
});
First: jQuery hover need 2 functions as arguments More here: http://api.jquery.com/hover/
$('#x').hover(
function() {
// your 'mouseenter' event handle
}, function() {
// your 'mouseleave' event handle
});
Second: you can simply use CSS hover pseudo-class if your code operate on the same element (#x)
#x:hover {
// this will be added to #x when 'mouseenter', and remove when 'mouseleave'
background-color: red;
}
try this..
$("#x").on("mouseover", function () {
//wrire your code here
});
if you populated elements through javascript,use the following. It is replacement for deprecated jQuery.live.
$("body").on("mouseover","#x", function () {
//wrire your code here
});
see this js fiddle http://jsfiddle.net/3aq48p5m/3/
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' );
});
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();
});
});
Trying to figure out how to use the Jquery .on() method with a specific selector that has multiple events associated with it. I was previously using the .live() method, but not quite sure how to accomplish the same feat with .on(). Please see my code below:
$("table.planning_grid td").live({
mouseenter:function(){
$(this).parent("tr").find("a.delete").show();
},
mouseleave:function(){
$(this).parent("tr").find("a.delete").hide();
},
click:function(){
//do something else.
}
});
I know I can assign the multiple events by calling:
$("table.planning_grid td").on({
mouseenter:function(){ //see above
},
mouseleave:function(){ //see above
}
click:function(){ //etc
}
});
But I believe the proper use of .on() would be like so:
$("table.planning_grid").on('mouseenter','td',function(){});
Is there a way to accomplish this? Or what is the best practice here? I tried the code below, but no dice.
$("table.planning_grid").on('td',{
mouseenter: function(){ /* event1 */ },
mouseleave: function(){ /* event2 */ },
click: function(){ /* event3 */ }
});
That's the other way around. You should write:
$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
}
}, "td");
Also, if you had multiple event handlers attached to the same selector executing the same function, you could use
$('table.planning_grid').on('mouseenter mouseleave', function() {
//JS Code
});
If you want to use the same function on different events the following code block can be used
$('input').on('keyup blur focus', function () {
//function block
})
I learned something really useful and fundamental from here.
chaining functions is very usefull in this case which works on most jQuery Functions including on function output too.
It works because output of most jQuery functions are the input objects sets so you can use them right away and make it shorter and smarter
function showPhotos() {
$(this).find("span").slideToggle();
}
$(".photos")
.on("mouseenter", "li", showPhotos)
.on("mouseleave", "li", showPhotos);
And you can combine same events/functions in this way:
$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
'click blur paste' : function() {
// Handle click...
}
}, "input");
Try with the following code:
$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change',
function() {
}
);