We Keep Coding

Change hover state css with jQuery [duplicate]

This is what I have:
$('#blah').hover(function(){
$('etc').show();
}, function(){
$('etc').hide();
});
This works just fine, now I want the exact above code working live with on() method:
$('#blah').on('hover', function(){
$('#etc').show();
}, function(){
$('#etc').hide();
});
But this is not working, anybody knows why? but also this works:
$('#blah').on('hover', function(){
$('#etc').show();
});
When I'm using on() method, the callback function is not working, so I'm using mouseover() and mouseleave() with on() and it's working, I just wanted to know why hover callback is not working with on(), that's so simpler than using 2 events....
Thanks

from Jquery docs. Jquery on
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.
$("div.test").on({
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});

From the JQuery source code, hover is not included in the event list that triggered leading to JQuery .on()
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
// Handle event binding
jQuery.fn[ name ] = function( data, fn ) {
return arguments.length > 0 ?
this.on( name, null, data, fn ) :
this.trigger( name );
};
});
It is because .hover() is just a shortcut for JQuery .mouseenter() and .mouseleave()
jQuery.fn.hover = function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
};
I hope this brief explanation provides little guidance.

Use mouseenter and mouseleave for hover. Check using hover with on here.
$("#blah").on(
{
mouseenter: function()
{
//stuff to do on mouseover
},
mouseleave: function()
{
//stuff to do on mouseleave
}
});
Use toggle to show / hide,
$('#blah').on('hover', function(){
$('#etc').toggle();
});

It's because hover is not really a browser event, in fact its just a shorthand for calling
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
Using with the .on('hover') form have been deprecated as of version 1.8.

use
jQuery.on("hover","#blah", function..)
Or you can use toggle feature of jQuery too

Yes it will not work because when you use .on() with hover then hover event just have one call-back function instead you can use multiple events in .on()
Try
$("DOM").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
}
});

Use toggle()
$('#blah').on('hover', function(){
$('#etc').toggle();
});

JQuery event (with selector) called by my code

I've got a problem, I try to call my jquery event.
I have 2 jquery event:
$element.on('click', function (e) { ... });
$element.on('click', '.toggle', function (e) { ... });
I would like to call the event with toggle selector. How can I do this?
$element.trigger('click', '.toggle') call always the first event.
Thank you

Ok thanks,
now i do:
$element.find('toggle').trigger('click')
And it runs fine

execute a change event on input that was modified by another function

I have a function that does a calculation on an input, I have a function in another script I want to run when the value of the input changes.
I try to do with the change event but does not register the change unless you change the value myself.
$(document).ready(
function(){
$("#hello").val(1+1);
$("#hello").change( function(){
alert("change");
}
);
});
the solution I found was
$(document).ready(
function(){
$("#hello").val(1+1).trigger('change');
$("#hello").change( function(){
alert("change");
}
);} );

I think you should be attaching the event first & then make the change. Don't you?
Besides you might have to fire the event manually (using .trigger), like this:
$(document).ready(function(){
$(".hello").change( function(){ alert("change"); });
$(".hello").val(1+1).trigger("change");
});

How to check if there is already a click/event associated to an element

lets say I have
function trigger(){
$('a.pep').each(function(){
$('a.pep').click(function(){
console.log($(this).val());
});
});
}
function push(){
$('body').append('<a class="pep">hey mate i have no trigger yet</a>');
trigger(); //now i do but the others have duplicated trigger
}
$(document).ready(function(){
$('a.push').click(function(){
push();
});
});
So it seems that the click event is being applied twice/+ because the console.log is lauched more than once by click
How can i prevent this?

The problem is that you call $('a.pep').click() lots of times. (In fact, you bind as many click handlers as there are matching elements to each element. And then you do it again every time one of them is clicked.)
You should lever the DOM event bubbling model to handle this. jQuery helps you with the on method:
$(document.body).on('click', 'a.pep', function() {
console.log('element clicked');
$(document.body).append('<a class="pep">Click handlers handled automatically</a>');
});
See a working jsFiddle.
Note that I have removed the val call, because a elements can't have a value... Note also that the on method is introduced in jQuery 1.7; before that, use delegate:
$(document.body).delegate('a.pep', 'click', function() {

Small change to your trigger function is all you need. Just unbind the click event before binding to ensure that it is never added more than once. Also, you don't need to use each when binding events, it will add the event to each item automatically.
function trigger(){
$('a.pep').unbind('click').click(function() {
console.log($(this).val());
});
}

You can check using data('events') on any element if the required event is attached or not. For example to check if click event is attached or not try this.
if(!$('a.pep').data('events').click){
$('a.pep').click(function(){
console.log($(this).val());
});
}

you should use jQuery live here because you add DOM elements dynamicly and you want them to have the same click behaviour
function push(){
$('body').append('<a class="pep">hey mate i have no trigger yet</a>');
}
$(document).ready(function(){
$('a.push').click(function(){
push();
});
$('a.pep').live('click', function(){
console.log($(this).val());
});
});

Try:
if($('a.pep').data('events').click) {
//do something
}

i think if you use live() event you dont need to make function
$('a.pep').live('click', function(){
console.log($(this).val());
});

How do I disable a jQuery function after some other event?

I want to disable the hover event on a particular list when another event occurs.

You can use the unbind function to remove those events.
$('#theListId').unbind('mouseenter').unbind('mouseleave');

You could also use:
$('#item').unbind('mouseenter mouseleave');
Which is same as:
$('#theListId').unbind('mouseenter').unbind('mouseleave');

function test(){ alert('test'); };
$( "li" ).hover( test );
$("li").unbind('hover', test);