StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>(<em>Look at the last edit in this answer if you need to use <code>.on()</code> with elements populated with JavaScript</em>)</p> <p>Use this for elements that are not populated using JavaScript:</p> <pre><code>$(".selector").on("mouseover", function () { //stuff to do on mouseover }); </code></pre> <p><code>.hover()</code> has it's own handler: <a href="http://api.jquery.com/hover/" rel="noreferrer">http://api.jquery.com/hover/</a></p> <p>If you want to do multiple things, chain them in the <code>.on()</code> handler like so: </p> <pre><code>$(".selector").on({ mouseenter: function () { //stuff to do on mouse enter }, mouseleave: function () { //stuff to do on mouse leave } }); </code></pre> <p>According to the answers provided below you can use <code>hover</code> with <code>.on()</code>, but:</p> <blockquote> <p>Although strongly discouraged for new code, you may see the pseudo-event-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.</p> </blockquote> <p>Also, there are no performance advantages to using it and it's more bulky than just using <code>mouseenter</code> or <code>mouseleave</code>. The answer I provided requires less code and is the proper way to achieve something like this.</p> <p><strong>EDIT</strong></p> <p>It's been a while since this question was answered and it seems to have gained some traction. The above code still stands, but I did want to add something to my original answer.</p> <p>While I prefer using <code>mouseenter</code> and <code>mouseleave</code> (helps me understand whats going on in the code) with <code>.on()</code> it is just the same as writing the following with <code>hover()</code></p> <pre><code>$(".selector").hover(function () { //stuff to do on mouse enter }, function () { //stuff to do on mouse leave }); </code></pre> <p>Since the original question did ask how they could properly use <code>on()</code> with <code>hover()</code>, I thought I would correct the usage of <code>on()</code> and didn't find it necessary to add the <code>hover()</code> code at the time.</p> <p><strong>EDIT DECEMBER 11, 2012</strong></p> <p>Some new answers provided below detail how <code>.on()</code> should work if the <code>div</code> in question is populated using JavaScript. For example, let's say you populate a <code>div</code> using jQuery's <code>.load()</code> event, like so:</p> <pre><code>(function ($) { //append div to document body $('<div class="selector">Test</div>').appendTo(document.body); }(jQuery)); </code></pre> <p>The above code for <code>.on()</code> would not stand. Instead, you should modify your code slightly, like this:</p> <pre><code>$(document).on({ mouseenter: function () { //stuff to do on mouse enter }, mouseleave: function () { //stuff to do on mouse leave } }, ".selector"); //pass the element as an argument to .on </code></pre> <p>This code will work for an element populated with JavaScript after a <code>.load()</code> event has happened. Just change your argument to the appropriate selector.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload