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

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

click event on input button

I try to bind a function to the click event on input button, but it doesn't seems to work and method is not called:
<div id='back'>
<input type="button"/>
</div>
jQuery:
$('#back').click(clickOnBackbutton);
function clickOnBackbutton(){
console.log('back to menu'); //function not called
}
I do not prefer to use onClick event, instead i prefer to use that approach. Thanx in advance.

You should put your code within document ready handler. also note that you are selecting the div tag instead of the input element.
$(document).ready(function(){
$('#back input[type=button]').click(clickOnBackbutton);
// $('#back input[type=button]').click(function(){
// or do something here
// });
})

Button:
<div id='back'>
<input type="button" id='back-button'/>
</div>
jQuery:
$(document).ready(function(){
$('#back-button').click(function(){
console.log('Back to Menu');
});
})

You bound to the div not the button.
give the button a name or select it as a child then bind the click event.
<div id='back'>
<input id='backbutton' type="button"/>
</div>
JQuery
$('#backbutton').click(clickOnBackbutton);
function clickOnBackbutton(){
console.log('back to menu'); //function not called
}

This should work:
function clickOnBackButton(){
console.log("back to menu");
}
$('#back').click(function(){
clickOnBackButton();
});

You could do this
$('#back').click(function(){
clickOnBackButton();
});
I don't think there's such a thing as an input type="button". Maybe type="submit" ?

Also you can use:
$('#back').on('click', function(){
// some action
});

JQuery 1.7+ you should attach the event using on.
function clickOnBackbutton(){
console.log('back to menu'); //function not called
}
$(document).on("click", "#back", clickOnBackbutton);
Running example

If you want div#back to capture clicked button event, then with the recent jquery you have to do this:
$('#back').on("click", "input[type=button]", clickOnBackbutton);
Note that you have to put script tag in the end of body, or wrap your code in $(document).ready event.

jquery unbind special event?

There is my code that I want to alert "test" once when mousemove , and then remove the mousemove event , but i use unbind() seem not work, can somebody help me ??
$(document).ready( function(){
$(document).mousemove( function(){
alert( "test" );
$(document).unbind("mousemove");
});
});

Simply use $.one() to bind a one-time use event handler.
$(document).ready(function() {
$(document).one("mousemove", function() {
alert("test");
});
});

I think its now on and off instead of bind/unbind
Can you please try
$(document).off("mousemove");

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