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. livequery() strange behavior

trying to run jquery plugin "livequery" to highlight some words in a dynamically generated search results doesn't work !
However adding an alert() function before excuting the code make the highlighting appear! so what is the problem?
$(document).ready(function(){
$('#searchResults').livequery(function(el){
// alert('test');
$( '#searchResults' ).highlight( highlightArray );
});
});

Can you try adding some delay by setTimeout()
$(document).ready(function(){
$('#searchResults').livequery(function(el){
// alert('test');
setTimeout(function(){
$( '#searchResults' ).highlight( highlightArray );
},400);
});
});

Why do you still use livequery? It is not necessary by now. It was before jQuery delegated events. See this SO answer for more informations. Use .on() instead of livequery().
So you can just do
$(document).on('change','#searchResults',function(el){
$('#searchResults').highlight(highlightArray);
});

Mouseover on all elements in frame only responds to click

I'm trying to apply a handler to all the elements inside an iframe (that is on the same domain) and I can't figure out why it the function only fires on click. I fear it may have to do with the fact that the iframe is only active when I'm clicking into it. I have seen applications of this in a jsfiddle such as this http://jsfiddle.net/danmana/pMBw2/
This is basically my code (I tried mimicking the jsfiddle using the delegate function and got the same results):
$('iframe').contents().on("mouseover", "*", function() {
$(this).css("background-color", "yellow");
});
EDIT
working with that jsfiddle (http://jsfiddle.net/danmana/pMBw2/) I found that if you switch it to the newest version of jquery 2.1.0, then the code no longer works, it seems 1.8.3 is the newest one that works with that code.

Mimicing the jsfiddle you mentioned should work just fine, you have to use the delegate() function:
Working js fiddle
<iframe src="http://fiddle.jshell.net"></iframe>
var $c = $('iframe').contents();
$c.delegate('div', "hover", function() {
$(this).css("background-color", "yellow");
});

This works for me -
var $c = $('iframe').contents();
$c.delegate('div', 'hover', function() {
$(this).css("background-color", "yellow");
});

jquery migration from 1.7 to 1.10.1

I'am trying to migrate from jquery 1.7 to 1.10 and the live function do not work anymore.
$("#detail_content").on("click", ".close", function (a) { // is ignored
//$("#detail_content .close").live("click", function (a) { //works fine with migrate
console.log("click");
});
the div.detail_content is loading later via ajax but the close button do not work anymore if i change from .live to .on
I think the delegation is missing.
any idea?

Looks like #detail_content also is an dynamic one, then try
$(document).on("click", "#detail_content .close", function (a) { // is ignored
//$("#detail_content .close").live("click", function (a) { //works fine with migrate
console.log("click");
});

You should use any closest static parent element (or body at last):
$("body").on("click", "#detail_content .close", function() { ... });
So if you have the markup like:
<body>
...
<div id="container">
...
<div id="detail_content"><button class="close">Close</button></div>
</div>
</body>
and #container is not replaced after Ajax call, then it is better to use:
$("#container").on("click", "#detail_content .close", function() { ... });

The .live() method is deprecated in jQuery 1.10 and above. Use .on() method to attach event handlers.
So you can use this code instead of .live()
$(document).on('click', '#detail_content .close', function(){
//your Code
});
I think this answer is useful for you and in this page you can see all deprecated method and it's useful for someone who want to migration from 1.7 to 1.10

VisioN, is it not the same to just use the following?
$(document).ready(function(){
$(".close").click(function(){
console.log("clicked");
}
});
Is there something about the code above that is slower or less efficient somehow?

How to use ON instead of LIVE [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery 1.7 - Turning live() into on()
I have with jQuery:
$(".house td[red]").live("click", function() {
alert('ok');
});
but function live is deprecated. How can i use on?
$(".house td[red]").on("click", function() {
alert('ok');
});
not working.

$(".house").on("click", 'td[red]', function() {
alert('ok');
});
have you tried this? You can check in documentation for details. Example from there:
$("#dataTable tbody").on("click", "tr", function(event){
alert($(this).text());
});
So you basically pass a "container" for wrapper. The reason why live is not recommended is that it can be written with "on" syntax like this:
$(document).on("click", '.house td[red]', function() {
alert('ok');
});
which you can see is not very efficient. Probably there's more to that :) so it is good you want to change it.

Use it as -
$(document).on("click", ".house td[red]", function() {
alert('ok');
});
The more efficient way is using .on() with immediate parent of the element -
$('.house').on("click", "td[red]", function() {
alert('ok');
});
Read here for better understanding of difference between live and on

on() is an all-things-to-all-men function that can work in different ways - both with direct and delegated events. live() was a means of achieving delegated events. This is achieved with on() by passing a filter as param 2, and bumping the callback to param 3:
$(".house").on("click", 'td[red]', function() {
alert('ok');
});

It's a three-argument variant, and you get to pick the "bubble" point:
$('body').on('click', '.house td[red]', function() { alert("ok"); });
The difference is that with this, the point at which the actual event handler is placed is under your control (like with the also-deprecated .delegate()). You can pick any parent element you like, which is a nice feature in complicated pages. (In your case, for example, you could put the handler on all the ".house" elements instead of the body.)

$(document).on('click', '.house td[red]', function(){
alert('ok');
});
Document is the static element we wish to attach our handler to.
First param is the event
Second param is the selector
Third param is the functions you wish to run against the selector when the event is fired.

Try this,
$(document).on("click", ".house td[red]", function() {
alert('ok');
});

$(".house td[red]").live("click", function() {
alert('ok');
});
Would be directly converted to this:
$(document).on("click", ".house td[red]", function() {
alert('ok');
});
But you can gain some performance by specifying the closest container that you know will exist at the time of the bind:
$('#someContainer').on("click", ".house td[red]", function() {
alert('ok');
});

$(document).on("click",".house td[red]",function(){
alert('ok');
});