jQuery - setInterval on mouseleave and clearInterval on mouseenter
-
05-07-2021 - |
문제
I'm trying dynamically to add some DIVS
(with dynamically added function) to the CONTAINER
. When I click on someone of these DIVs
, MENU
is inserted to this DIV
.
On mouseleave
I need to remove MENU
from this DIV
with delay
or setInterval
about 5 seconds. It works, but chaotically... So I need :
When
mouseleave
out of thisDIV
and then immediately I put mouse back over thisDIV
, I need to stopdelay
orsetInterval
. I need to stop removing theMENU
.There is some problem with function
'handler'
. Becouse when I add someDIV
toCONTAINER
, for the first time I need to usedoubleclik
, to call this function. But I need to use simple click.
Here's an example: http://jsfiddle.net/ynternet/84nVQ/5/
HTML
<div id="add" style="background:yellow; width:100px;"> add new </div>
<div id="container"> </div>
<div id="menu" style="color:red;"><b> I'm here </b></div>
jQuery
function handler() {
$(this).on({
click: function(e) {
clearTimeout(time);
if ($(this).find("#menu").length) {
return;
}
$('#menu').prependTo($(this));
$("#menu").css({
position: "absolute",
left: "100px"
}).show();
}
});
$(this).on({
mouseleave: function(e) {
time = setTimeout(function() {
$('#menu').appendTo('body').clearTimeout(time);;
}, 5000);
}
});
$(this).on({
mouseover: function(e) {
clearTimeout(time);
}
});
}
$("#add").on({
click: function(e) {
var timestamp = Date.now();
var posx = Math.floor(Math.random()*400);
var posy = Math.floor(Math.random()*400);
$('#container').append(function() {
return $('<div class="add_to_this" id="' + timestamp + '" style="left:'+posx+'px; top:'+posy+'px; ">Click here</div>').click(handler);
});
}
});
CSS
#container {
width:500px;
height:500px;
background: palegoldenrod;
position: relative;
top:20px;
left: 100px;
padding: 0px;
}
.add_to_this {
background:yellowgreen;
position: absolute;
display:inline-block;
width:200px;
height:30px;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-o-user-select: none;
}
해결책
function handler() {
$(this).on({...
what is $(this)
?
you are not using or passing any selector
use $("#container").on
다른 팁
This is solution :
JsFiddle - working example : http://jsfiddle.net/ynternet/84nVQ/6/
jQuery
function handler1() {
clearTimeout(time);
if ($(this).find("#menu").length) {
return;
}
$('#menu').prependTo($(this));
$("#menu").css({
position: "absolute",
left: "100px"
}).show();
}
function handler2() {
time = setTimeout(function() {
$('#menu').appendTo('body').clearTimeout(time);;
}, 5000);
}
function handler3() {
clearTimeout(time);
}
$("#add").on({
click: function(e) {
var timestamp = Date.now();
var posx = Math.floor(Math.random() * 400);
var posy = Math.floor(Math.random() * 400);
$('#container').append(function() {
return $('<div class="add_to_this" id="' + timestamp + '" style="left:' + posx + 'px; top:' + posy + 'px; ">Click here</div>').click(handler1).mouseleave(handler2).mouseenter(handler3);
});
}
});