Jquery on hover not functioning - javascript

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

Related

Jquery combine click and change

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

Concatenating a function in JavaScript

I have the following two JavaScript function:
JS 1
$( ".show-more" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
$( this ).toggleClass("show-more-rotate");
});
JS 2
$( ".show-more-section" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
$( this ).toggleClass("show-more-section-rotate");
});
Is there a way to concatenate the two functions into one? I tried the following, but the functionality seems to only be working for the last listed element:
JS - Failed attemp at concatenating
$( ".show-more, .show-more-section" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
$( this ).toggleClass("show-more-rotate, show-more-section-rotate");
});
See comments inline:
// bind event on both the elements
$(".show-more, .show-more-section").on('click', function (event) {
// ^^^^^^ Add this
event.preventDefault();
$(this).next().slideToggle("fast", function () {});
$(this).toggleClass("show-more-rotate show-more-section-rotate");
// Remove `,` from toggleClass
});
EDIT
You can also chain the methods as:
$(this).toggleClass("show-more-rotate show-more-section-rotate")
.next().slideToggle("fast", function () {});
Update
If you want to toggle class after slideToggle is completed:
var $this = $(this);
$this.next().slideToggle("fast", function () {
$this.toggleClass("show-more-rotate show-more-section-rotate")
});
try this:-
$(".show-more, .show-more-section").on('click', function (event) {
event.preventDefault();
$(this).next().slideToggle("fast", function () {});
if($(this).is('.show-more'))
{
$(this).toggleClass("show-more-rotate");
}else
{
$(this).toggleClass("show-more-section-rotate");
}
});
Demo
You can create the handler function and can reuse it in the click handler
$( ".show-more" ).click(showMoreClickHandler);
$( ".show-more-section" ).click(showMoreClickHandler);
function showMoreClickHandler(e) {
e.preventDefault();
$( this ).next().slideToggle( "fast", function() {});
$( this ).toggleClass("");
}
For toggle class, you can add data-toggle-class attribute in HTML and can read the value and perform toggling.
I hope, show-more-rotate and show-more-section-rotate should be applied on it's respective element not on the other.
Remove the comma in the toggleClass:
$(".show-more, .show-more-section").on('click', function (event) {
event.preventDefault();
$(this).next().slideToggle("fast", function () {
});
$(this).toggleClass("show-more-rotate show-more-section-rotate");
});

Attach multiple event handlers with .on() and name spaces syntax

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");

jQuery live() deprecated: Using on for mouseenter and mouseout?

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.

How to give two functions to delegate function

I'm using JQuery and trying to use delegate for the hover action. Problem is the hover action can get two handlers, the handle in and the handle out. How can I achieve this using delegate?
I've tried this and it didn't work:
$(document).delegate('.box', 'hover',
function() { $(".a").addClass(".hover");},
function() { $(".a").removeClass(".hover");});
According to the docs for .hover:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
So you should be able to just call delegate once for each of these functions:
$(document)
.delegate('.box', 'mouseenter', function() { alert(1); })
.delegate('.box', 'mouseleave', function() { alert(2); });
An alternative to #Justin's solution is to check the event type in the callback:
function onMouseenter()
{
alert(1);
}
function onMouseleave()
{
alert(2);
}
$(document).delegate('.box', 'hover', function(event)
{
if (event.type === 'mouseenter') onMouseenter.apply(this, arguments);
else onMouseleave.apply(this, arguments);
});
That said, it's unnecessary to use .delegate() if you're just going to delegate to document. Use .live() instead, which is much more concise:
$('.box').live('hover', function (event)
{
// snip...
});

Categories

Resources