I know that the hover method in query allows you to specify what happens when a user hovers and what happens when a user un-hovers. However, I am using .on() to handle the hover event because the content is dynamically created. How can I return it to its original state when the user un-hovers. Here is my code, I have tried .off() but it has not given the results I'm looking for:
$('tr').on('hover', 'td', function(){
$(this).fadeTo(500, 1 )
})
Here's what I've tried:
$('tr').off('hover', 'td', function(){
$(this).fadeTo(500, .85 )
})
thanks.
If you want to use .on(), the events to handler are "mouseenter" and "mouseleave". You can do it with a single call:
$('tr').on({
mouseenter: function() {
$(this).fadeTo(500, 1); // or whatever
},
mouseleave: function() {
$(this).fadeTo(500, 0.85); // or whatever
}
}, 'td');
You can also do this with CSS, using the ":hover" pseudo-class. That'll work even in older versions of IE, to some extent. You can animate the changes too.
This is what you need
$('tr').on('mouseenter', 'td', function(){
$(this).fadeTo(500, 1 )
}).on('mouseleave', 'td', function(){
$(this).fadeTo(500, .85 )
})
You can do it in pure CSS but here you go:
$('tr').on('mouseenter mouseleave', 'td', function( e ){
$(this).fadeTo(500, e.type=="mouseenter" ? 1 : 0.85 );
});
Using hover:
$('tr td').hover(function( e ){
$(this).fadeTo(500, e.type=="mouseenter" ? 1 : 0.85 );
});
Tip:
.on('hover' will not bound direct references to the mouseenter mouseleave events separately like using the Method reference $(selector).hover(handlerIn, handlerOut), but just the hover event.
To resume:
$('tr').on('hover', 'td', function( e ){
// no separated "mouseenter" and no "mouseleave" e.type reference here :(
// just "hover" event
});
$('tr').on('mouseenter mouseleave', 'td', function( e ){
// e.type are defined :)
});
$('tr').on('mouseenter', 'td', function( e ){
// function only for 'mouseenter' event
}).on('mouseleave', 'td', function(){
// function only for 'mouseleave' event
});
$('tr td').hover(function( e ){
// e.type "mouseenter" and "mouseleave" are in event reference :)
});
// $("tr td").hover(handlerIn, handlerOut)
$('tr td').hover(function(){
// Method default // e.type reference == "mouseenter"
}, function(){
// Method default // e.type reference == "mouseleave"
});
Now it just depends if you need to delegate your events to elements using .on() (dynamically created elements) or is .hover() just suitable for your needs.
Regarding the .off() Method you can take a closer look at what it does: here
Basically if at some point you want to remove any further event delegation to an element than you use .off():
$('#selector').on('click', 'button', function(){
// Function callback:
alert('I will alert only once cause of off()');
$('#selector').off('click', 'button');
});
hover is not an event it is a shortcut for mouseenter and mouseleave event handlers
$('tr').on('mouseenter', 'td', function(){
$(this).fadeTo(500, 1 )
}).on('mouseleave', 'td', function(){
$(this).fadeTo(500, .85 )
})
$('.element').hover(
function () {
$(this).fadeTo(500, 1);
},
function () {
$(this).fadeTo(500, .85);
}
);
Related
Is it possible listen click and change for one code?
$(document).on("click", "button.options_buy",function(event) {
// same code
}
$(document).on("change", "select.options_buy",function(event) {
// same code
}
I try this
$(document).on("click change", "button.options_buy,select.options_buy",function(event) { }
It works but I want 'click' only for 'button.options_buy' and 'change' for 'select.options_buy'
is it possible?
Best way to do it is to have two event handlers as you have, but only have a common function that is called from each:
$(document).on("click", "button.options_buy",function(event) {
commonFunction();
})
$(document).on("change", "select.options_buy",function(event) {
commonFunction();
})
function commonFunction(){
//common function code
}
I would like to extend your code.
$(document).on("click change", "button.options_buy,select.options_buy",function(event) {
if(event.type=="click"){
someFunction();
} else if(event.type=="change"){
someFunction();
}
}
You can use .on() to bind a function to multiple events:
$('#foo').on('keypress click change', function(e) {
//
});
OR declare a function and call it for each event
$('#foo')
.change(myFunction)
.click(myFunction)
.blur(myFunction)
jQuery .bind()
$( "#foo" ).bind({
click: function() {
// Do something on click
},
mouseenter: function() {
// Do something on mouseenter
}
});
OR
$( "#foo" ).bind( "mouseenter mouseleave", function() {
$( this ).toggleClass( "entered" );
});
Is there anyway to define a drag event in MooTools using the mousedown, mouseup and mousemove events. I would like to be able to do something like the following:
$('#knob').addEvent('drag', function (e) {
// Drag event code goes here...
});
Dragging
Although Mootools has implemented all you need for drag, drop, slide and similar effects, writing your own event is a good way to learn how events work. Here is an example of how to add additional custom event by using the Element.Events Object.
Effect starts on mousedown event that registers mousemove event. When dragging is over mouseup event is fired that removes the mousemove event listener.
Since it can happen that mouse leaves the box (mouseup is not fired to clean up), mouseout event is added also.
At every step of the effect, drag event handler is launched with the original event object passed as argument, You can see the type of the original event with console.log( e.type );
window.addEvent( 'domready', function() {;
Element.Events.drag = {
// the function that will get fired when the custom event is added
onAdd: function() {
this.addEvents({
mousedown: function(e) {
this.store( 'x', e.page.x - this.getPosition().x );
this.store( 'y', e.page.y - this.getPosition().y );
this.addEvents({
mousemove: function(e) {
this.setPosition({
x: e.page.x - this.retrieve( 'x' ),
y: e.page.y - this.retrieve( 'y' )
});
this.fireEvent( 'drag', e );
},
mouseout: function(e) {
this.fireEvent( 'mouseup', e );
}
});
},
mouseup: function(e) {
this.removeEvents( 'mousemove' );
this.removeEvents( 'mouseout' );
this.fireEvent( 'drag', e );
}
});
},
// the function that will get fired when the custom event is removed
onRemove: function() {
this.removeEvents( 'mousedown' );
this.removeEvents( 'mouseup' );
}
};
$('draggable').addEvent( 'drag', function( e ) {
console.log( e.type );
});
// $('draggable').removeEvents( 'drag' );
});
A few good articles about Mootools events:
mootools.net
ryanflorence.com
When using .on() in jQuery you can attach multiple event handlers like so:
$("li").on({
click: function(){
$(this).toggleClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});
You can also handle events using name spaces, like so:
$( 'li' ).on( 'click.toggles', function() {
$(this).toggleClass("active");
});
$( 'li' ).off( 'click.toggles' );
//click.toggles is the name space?
How do you you combine these two syntax? In hopes to easily turn off a set of multiple event handlers using .off().
Or am I totally not understanding namespaces and this is just wrong.
For on you can write:
$("li").on({
"click.namespace": function(){
$(this).toggleClass("active");
},
"mouseenter.namespace": function(){
$(this).addClass("inside");
},
"mouseleave.namespace": function(){
$(this).removeClass("inside");
}
});
And for off you can write
$("li").off(".namespace");
$("li").off("click.namespace mouseenter.namespace mouseleave.namespace");
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();
});
});
I wonder how I can rewrite the following listener with jQuery on()
$('.box').live({
mouseenter:
function() {
$(this).children('.menu').stop(true, true).fadeIn(fadeIn);
},
mouseleave:
function() {
$(this).children('.menu').stop(true, true).fadeOut(fadeOut);
}
});
Any ideas?
$(document).on('hover', '.box', function(e) {
if( e.type == 'mouseenter') {
$(this).children('.menu').stop(true, true).fadeIn(fadeIn);
} else {
$(this).children('.menu').stop(true, true).fadeOut(fadeOut);
}
});
Instead of document it would be better to use any parent element of .box which is not dynamic.
Read about .on().
Syntax of .on() for delegate event (aka live event) is:
$( StaticParent ).on( eventName, target, handlerFunction );
For exact .on equivalent:
$(document).on({
mouseenter: function() {
$(this).children('.menu').stop(true, true).fadeIn(fadeIn);
},
mouseleave: function() {
$(this).children('.menu').stop(true, true).fadeOut(fadeOut);
}
}, '.box');
Though the main benefit here is that you don't need to use document, you can just use the closest parent that is guaranteed to exist for the lifetime of the page.