Develop Reference

jQuery .on() hover not working for HTML5 select box

I'm trying to capture the event when the mouse is hovering over the select box, be it collapsed or expanded. I'm using .on() in the following manner,
$(document).on('hover', "select#selectBox", function() {
alert("done");
});
Please note that I'm using this snippet inside DOM document ready too.
I've tried changing the event to click, scroll, mouseover, mouseenter, etc too.
Doesn't seem to work for those too.
Please point out where I'm going wrong.
I've made a JSFiddle: https://jsfiddle.net/g9vf1mty/2/
EDIT: Thanks for the quick response everyone!
I have fixed my mistakes :)
I have tweaked the JSFiddle a little bit. Now, I'm attempting to scroll the select box with a size lesser than the number of options and have changed the 'hover' event to 'scroll' event. It does not seem to work that way.
I'm using jQuery 2.1.3.
JSFiddle here: https://jsfiddle.net/g9vf1mty/8/

You don't need to wrap event bound to document level inside ready pseudo event. And because you want to delegate event, maybe to hanlde dynamic elements, the correct way would be to bind both mouseenter & mouseleave events this way:
eventually filtering by event type inside handler (in/out)
$(document).on('mouseenter mouseleave', "#selectBox", function(e) {
alert("done: " + e.type);
});

$("select#selectBox").hover(function() {
alert("working");
});
use hover function, in the above manner. and more importantly, you missed jQuery library too.
As on("hover") was deprecated form jQuery 1.8, it won't work on Higher versions of jquery.

You should use mouseenter event
and include jquery in your fiddle :)
Look also at this (SO question)[Is it possible to use jQuery .on and hover?

Use jQuery trigger() with hoverIntent

Is it possible to trigger a hoverIntent on an element.
I have tried $(elem).trigger('hoverIntent');, which didn't work.
Edit: Js Fiddle: http://jsfiddle.net/H2p6T/

Simply triggering any of the event types did nothing unless the hoverIntent had been triggered genuinely.
I took a look at the hoverIntent source and it expects two things: mouseenter and mousemove with pointer coordinates defined. So I triggered events with fake coordinates:
$('.foo').trigger({ type:"mouseenter", pageX:"123", pageY:"123" });
$('.foo').trigger({ type:"mousemove", pageX:"123", pageY:"123" });
The coordinates don't matter as long as they are close enough to each other to trigger hoverIntent.
I used the r7 version for this.

Have you tried
$(elem).trigger('hover');
or
$(elem).trigger('mouseover');
$(elem).trigger('mouseout');
or
$(elem).trigger('mouseenter');
$(elem).trigger('mouseleave');
hoverIntent is a plugin not an actual event so I believe you have to trigger an event that hoverIntent actually binds to your element
Here's an example of it working with the mouseenter/mouseleave
http://jsfiddle.net/H2p6T/3/

Can you do it like this?
$(elem).hoverIntent();
Ok that didn't work...
I had a play with it: http://jsfiddle.net/8CCTM/11/
hoverIntent will trigger on mousenter() but it will only do it after the hoverIntent element has been activated with the mouse.

Detect change in div and do rebind events jQuery

In jQuery how can I watch a div to determine if it has changed so that I can rebind events and perform some other action as needed?

If the div has dynamic content I would like to tell you about event delegation.
Event delegation allows you to avoid adding event listeners to
specific nodes; instead, the event listener is added to one parent.1
To use event delegation in jQuery you use the on method and provide a selector argument.

You could use DOMSubtreeModified event(see here)
$('my-selector').bind('DOMSubtreeModified', function() {
console.log('Children have been modified');
});
I haven't checked the supported nature of this event but in chrome it works.
Unfortunately : Why is the DOMSubtreeModified event deprecated in DOM level 3?

hover and moveout not giving expcted result

Because I am creating DOM using Jquery it was difficult to copy the output so i am adding one image of code that i have captured using one tool
i have attached hover and mouseout event to id='nf1' using this code
$("#nf"+n).hover(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
});
$("#nf"+n).mouseout(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
});
Here n is post_id and i am looping all post_id got from response.This attach events but not giving expected behaviour Like when mouse over to id='nf1post_delete' it is hide
Please ask if any doubts

The way you're describing this, you will actually want to pass two functions to .hover(), one for the action on mouseenter and one for the action on mouseleave. You can pass only one function to .hover(), but it will run that function when you roll over and when you roll out.
http://api.jquery.com/hover/
So, try this instead:
$("#nf"+n).hover(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
},function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
});
The .mouseout() function isn't needed at all.

At first, .hover() includes mouseenter and mouseleave. Do you put both function in there and don't use an additional event. Also don't use mouseout(). Use instead mouseleave().
So you either use hover(function(){},function(){}); alone, or you use mouseenter() and mouseleave().

Since you're manipulating the DOM, I'm going to recommend using jQuery .on() instead of .hover():
$(document).on({
mouseover: function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
},
mouseout: function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
}
}, "#nf"+n);
If you're creating something in the DOM after the page has loaded, .on() helps to attach event listeners to it.
jQuery API for .on()

How can I execute EventListener 'click' from JavaScript

I have event listener myObject.addEventListener('click',this.doSomething,false) on element.
It works fine when I do mouse click but I cannot figure out how to trigger click from JavaScript. It seems like element.click() does not work for divs?
I am using jQuery and I have also tried trigger('click') but nothing is happening.
How can I in JavaScript execute the EventListener?
Update:
Here is sample code http://jsbin.com/iniwi5/2

Can you bind the event using jQuery instead?
$(myobject).click(function() {
});
Then
myobject.trigger('click');
would programmatically trigger the click.

To trigger a click event listener added via addEventListener, you need to manually dispatch a click event, using either dispatchEvent (for standards-compliant browsers) or fireEvent (for IE < 9).

Try this:
myObject.click; // no `()`
OR:
(myObject.click)();