Develop Reference

change a mouseenter event into a timed event

I have the following code that works excellent for a mouseenter event:
$(document).ready(function () {
$(".someClass").mouseenter(function () {
//does some stuff
}).mouseleave(function () {
//does some stuff
});
});
What I am looking for is to change the above so that it is a timed event and does not require the mouse to enter the DIV with the associated class.
Any help would be greatly appreciated.
Regards,
jmcall10

Something like this? (If that's the case, I'll add some comments)
$(function() {
$('.someClass')
.on('mouseenter', function() {
console.log('mouse entered');
})
.on('mouseleave', function() {
console.log('mouse exited');
});
setTimeout(function() { $('.someClass').trigger('mouseenter'); }, 2000);
setTimeout(function() { $('.someClass').trigger('mouseleave'); }, 4000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someClass">Enter your mouse here</div>

First define a timed event: setTimeout(fun, 1000);
Then trigger event which you want in fun: $('.someClass').dispatchEvent(new Event('mouseenter');
May can help you...

Prevent newly created click event from running

Here's a simplified example of the problem I'm having. Say I have this HTML:
<div id="test">Hello</div>
I have the following event handler attached to this div:
$("#test").on("click", function() {
console.log("Clicked test!");
$(document).one("click", function() {
console.log("Clicked on document!");
});
});
Here's a jsFiddle of this example.
If I click on Hello, ideally I would only want "Clicked test!" to appear in my console, and for "Clicked on document!" to appear after I click a second time. However, both log messages appear, as the click event bubbles up to the document object and runs this new click event. Is there a way to prevent this from happening without using stopPropagation, which may have other unintended side effects?

My solution is kind of hacky, but it does work. If you set the document click handler asynchonously, the event doesn't bubble up:
$("#test").on("click", function(e) {
console.log("Clicked test!");
setTimeout(function(){
$(document).one("click", function() {
console.log("Clicked on document!");
});
}, 10);
return true;
});
See the modified fiddle: https://jsfiddle.net/voveson/qm5fw3ok/2/

Or using on and off with selectors:
$(document).on("click", "#test", add_doc_click)
function add_doc_click() {
console.log("Clicked test!");
$(document).on("click", function (e) {
console.log("Clicked on document!");
})
$(document).off("click", "#test", add_doc_click)
}
https://jsfiddle.net/y2q1gocu/
EDIT: to have test and clicked each time:
$(document).on("click", "#test", add_doc_click)
function add_doc_click() {
console.log("Clicked test!");
$(document).on("click", function (e) {
console.log("Clicked on document!");
})
$(document).on("click", "#test", function (e) {
console.log("Clicked test!");
})
$(document).off("click", "#test", add_doc_click)
}
https://jsfiddle.net/y2q1gocu/1/

Assuming nothing should happen on the third click, add these two lines at the end of the click handler:
$(this).off('click');
return false;
Fiddle

Incase you want to click Hello once and then remaining on document.
$( "div" ).one( "click", function() {
console.log("Clicked test!");
event.stopPropagation();
});
$(document).on("click", function() {
console.log("Clicked on document!");
});
https://jsfiddle.net/qm5fw3ok/3/

You can use a class that flags whether or not the element has been clicked on or not.
$("#test").on("click", function(e) {
console.log("Clicked test!");
if($(this).hasClass('clicked')){
$(document).one("click", function(e) {
console.log("Clicked on document!");
});
}else{
$(this).addClass('clicked');
}
});

how to bind 2 events with JQuery's .on method

I have this code which is working great on already created divs
$('.MyDivs').click(function(){
$('#OtherDiv').css('display','block');
}).mouseleave(function(){
$('#OtherDiv').css({ display: 'none' });
});
but does not work on dynamically created new Divs. I know there is a .on method of Jquery for dynamically created divs but do not know how to bind 2 events with it. I tried something like this
$(document).on('click', '.MyDivs', function()
{
$('#OtherDiv').css('display','block');
}).mouseleave(function(){
$('#OtherDiv').css({ display: 'none' });
});
I also tried this
$(document).on('click', '.MyDivs', function()
{
$('#OtherDiv').css('display','block');
});
$(document).on('mouseleave', '.MyDivs', function()
{
$('#OtherDiv').css({ display: 'none' });
});
but does not work. How can I bind click and mouseleave methods with .on?
My Problem
I just want to show Otherdiv on click of any div which has .MyDivs class and hide Otherdiv when mouse leaves currently .MyDivs div

you can try this. This should work.
$(document).on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
}
}, ".MyDivs");

You need to use on for each chain. This should work:
$(document).on('click', '.MyDivs', function() {
$('#OtherDiv').css('display','block');
}).on('mouseleave', '.MyDivs', function() {
$('#OtherDiv').css('display','none'});
});
Or you can bind both events and look for the event.type, then toggle the div depending on the result:
$(document).on('click mouseleave', '.MyDivs', function(e) {
$('#OtherDiv').toggle( e.type == 'click' );
});

How to avoid and return an event in jquery when you specify a new event?

I need to overwrite the events but, the application has an option to return the original events to each element of the document. Any ideas?
For example:
<div class="mydiv">
</div>
$(document).delegate( '.mydiv', click', function () {
alert('This is the original event my event!');
});
$(document).delegate( '.mydiv', 'click', function() {
alert('Do this and ignore de previous...');
// For example: How to return the original event when mouseleave event will executed?
});
$(document).delegate( '.mydiv', 'mouseleave', function() {
// return the original event of mydiv
});

Use undelegate function before creating new click function
Docs http://api.jquery.com/undelegate/

try to check click event in functions
$(document).delegate( '.mydiv', click', function ()
{
if(clicked){
return;
}
alert('This is the original event my event!');
});
$(document).delegate( '.mydiv', 'click', function() {
if(!clicked){
return;
}
alert('Do this and ignore de previous...');
});

on and hover not working together

My jquery code
It's not working when
$("a").on("hover",function(){$(this).css("background","#ccc");},function(){$(this).css("background","#fff")});
But is working when
$("a").hover(function(){$(this).css("background","#ccc");},function(){$(this).css("background","#fff")});
How to make it to work with hover

In case of .on() hover it will look like
$("a").on('hover', function(e) {
if(e.type =='mouseenter') {
// code for mouseenter
} else {
// code for mouseleave
}
});
But for .hover() is accept two functions first one for mouseenter and second one for mouseleave.
$('a').hover(
// for mouseenter
function() {
},
// for mouseleave
function() {
}
);
So if you want to use .on() then your code will:
$("a").on('hover', function(e) {
if(e.type =='mouseenter') {
// code for mouseenter
$(this).css("background","#ccc");
} else {
// code for mouseleave
$(this).css("background","#fff")
}
});
As #ThiefMaster comment if you want to bind mouseenter and mouseleave separately then you can try:
$('a')
.mouseenter(function() {
$(this).css('background', '#ccc');
})
.mouseleave(function() {
$(this).css('background', '#fff');
});
or using .on() you can do
$('a').on({
mouseenter: function() {
$(this).css('background', '#ccc');
},
mouseleave: function() {
$(this).css('background', '#fff');
}
});

Here's a live demo
And the code
$("a").on('hover', function(e) {
if(e.type =='mouseenter') {
// do something when mouse enter
alert("mouse enter");
} else {
// do something when mouse leave
alert("mouse leave");
}
});​

Hover is an shortcut for mouseenter and mouseleave events. So you can bind those using on like
$("a").on({
mouseenter: function(){$(this).css("background","#ccc");},
mouseleave: function(){$(this).css("background","#fff");}
});