Why is the mouse leave not firing.
$('.tlcr').hide();
$('.tli')
.on({
mouseenter: function() {
$('.tlcr').hide();
const index = $(this).index('.tli');
$('.tlcr').eq(index).show();
},
mouseleave: function() {
$('.tlcr').eq(index)
.on({
mouseenter: function() {
$('.tlcr').eq(index).show();
}, mouseleave: function() {
$('.tlcr').hide();
}
});
$('.tlcr').hide();
}
});
Above code into a fiddle: https://jsfiddle.net/czqab09j/3/
I want to achieve this: https://jsfiddle.net/aLquks1c/1/
But I would like to achieve it with the code from the first fiddle. But I am doing something wrong.
I got it working and here is the updated code:
$('.tli')
.on({
mouseenter: function() {
$('.tlcr').hide();
const index = $(this).index('.tli');
$('.tlcr').eq(index).show();
},
mouseleave: function() {
$('.tlcr').eq(index)
.on({
mouseenter: function() {
$('.tlcr').eq(index).show();
}
});
}
});
$('.tlcr')
.on({
mouseleave: function() {
$('.tlcr').hide();
}
});
I basically removed the nested mouse leave function and made it standalone.
See here the result in a fiddle: https://jsfiddle.net/czqab09j/4/
Related
I have content that is dynamically loaded. This content needs to be invoked in the following way due to it's dynamic nature.
This works perfectly if no setTimeout is used. Is there a way of setting a timeout of 0.25 seconds in this instance?
Fiddle https://jsfiddle.net/vuezt9dh/
Works
$(".wrapper").on({
mouseenter: function() {
$(this).find('.show-me').slideDown(150);
},
mouseleave: function() {
$(this).find('.show-me').slideUp(0);
}
}, '.main-page');
Doesn't work
$(".wrapper").on({
mouseenter: function() {
var $this = $(this);
setTimeout(function() {
$this.find('.show-me').slideDown(150);
}, 250);
},
mouseleave: function() {
$(this).find('.show-me').slideUp(0);
}
}, '.main-page');
Your targeting is incorrect, i'm suprised this works at all (didn't in my tests)
Demo https://jsfiddle.net/vuezt9dh/2/
Should be:
$(".main-page").on({
mouseenter: function() {
var $this = $(this);
setTimeout(function() {
$this.find('.show-me').slideDown(150);
}, 550);
},
mouseleave: function() {
$(this).find('.show-me').slideUp(0);
}
}, '.wrapper');
Your wrapper and main-page were the wrong way around.
I'm trying to change a text color when hovering on squares, and then keep that change on click.
I used jQuery ; the squares are divs that have the ho class:
$('#bg1').on({
mouseover: function(){
$('span').css("color","orange");
},
mouseleave: function(){
$('span').css("color",$('#currentColor').css("color"));
},
click: function(){
$('.ho').on('mouseleave');
$(this).off('mouseleave');
$('#currentColor').css("color","orange")
}
});
$('#bg2').on({
mouseover: function(){
$('span').css("color","magenta");
},
mouseleave: function(){
$('span').css("color",$('#currentColor').css("color"));
},
click: function(){
$('.ho').on('mouseleave');
$(this).off('mouseleave');
$('#currentColor').css("color","magenta")
}
});
Just see the fiddle : http://jsfiddle.net/ZqfTX/868/
It works at first : when I click on a cube, it keeps the text color, and when I hover out of that cube to see the other hover points (without click), I see their effects, and moving out returns well to the color of the clicked cube.
But, when clicking on the other cube and testing again : it all breaks..
Why could this be happening ?
You do not need the: $(this).off('mouseleave'); && $(this).off('mouseleave'); in your click functions.
$('#bg1').on({
mouseover: function(){
$('span').css("color","orange");
},
mouseleave: function(){
$('span').css("color",$('#currentColor').css("color"));
},
click: function(){
// $('.ho').on('mouseleave');
// $(this).off('mouseleave');
$('#currentColor').css("color","orange")
}
});
$('#bg2').on({
mouseover: function(){
$('span').css("color","magenta");
},
mouseleave: function(){
$('span').css("color",$('#currentColor').css("color"));
},
click: function(){
// $('.ho').on('mouseleave');
// $(this).off('mouseleave');
$('#currentColor').css("color","magenta")
}
});
Here is the working fiddle: http://jsfiddle.net/ZqfTX/871/
Works fine with this
$('#bg1').on({
mouseover: function(){
$('span').css("color","orange");
},
mouseleave: function(){
$('span').css("color",$('#currentColor').css("color"));
},
click: function(){
//$('.ho').on('mouseleave');
//$(this).off('mouseleave');
$('#currentColor').css("color","orange")
}
});
$('#bg2').on({
mouseover: function(){
$('span').css("color","magenta");
},
mouseleave: function(){
$('span').css("color",$('#currentColor').css("color"));
},
click: function(){
//$('.ho').on('mouseleave');
//$(this).off('mouseleave');
$('#currentColor').css("color","magenta")
}
});
When you click and execute:
$(this).off('mouseleave');
The function inside:
mouseleave: function(){ // code }
Don't work anymore, because are you removing the event handler
and only can execute mouseover handler, because of that, it set the
color when you hovering.
For more information:
http://api.jquery.com/off/
I'm looking for a way to pass a variable that is relative to the element to both mouseenter and mouseleave events. For example, if I had:
jQuery('.element').on({
mouseenter: function () {
var $child = jQuery(this).find('.child');
$child.fadeIn();
},
mouseleave: function () {
var $child = jQuery(this).find('.child');
$child.fadeOut();
}
});
Is there a way to avoid defining the $child variable twice? I was able to figure this out using .hover(), however I am now unable to use that as I am calling it on dynamically generated elements, for which .hover() will not work.
You can use this way to delegate both events:
jQuery(document).on("mouseenter mouseleave", ".element", function(e){
jQuery(this).find('.child').fadeToggle();
// you can check for e.type for more complex logic
});
The syntax to delegate with different handlers is:
jQuery(document).on({
mouseenter: function () {
//...
},
mouseleave: function () {
//...
}
}, ".element");
Use something like that:
jQuery('.element').on({
mouseenter: function (e) {
var ele = e.currentTarget;
ele.fadeIn();
},
mouseleave: function (e) {
var ele= e.currentTarget;
ele.fadeOut();
}
});
You could reuse the same function in both events, something like:
jQuery('.element').on({
mouseenter: function () {
handleFade("enter", jQuery(this));
},
mouseleave: function () {
handleFade("leave", jQuery(this));
}
});
function handleFade(state, $elem){
var $child = $elem.find('.child');
if(state=="enter"){
$child.fadeIn();
} else if(state=="leave"){
$child.fadeOut();
}
}
I'm using JQuery tooltip plugin and I'm trying to simulate a input button on hover, which it does successfully but I cannot click on said button. It's like it never exists in the DOM, or maybe it does but then is instantly removed. I'm not sure why the click is not binding.
http://jsfiddle.net/BgDxs/126/
$("[title]").bind("mouseleave", function (event) {
var evt = event ? event : window.event;
var target = $(evt.srcElement || evt.target);
evt.stopImmediatePropagation();
var fixed = setTimeout(
function () {
target.tooltip("close");
}, 200);
$(".ui-tooltip").hover(
function () { clearTimeout(fixed); },
function () { target.tooltip("close"); }
);
});
$("[title]").tooltip({
content: "...wait...",
position: { my: "left top", at: "right center" },
open: function (event, ui) {
var _elem = ui.tooltip;
window.setTimeout(
function() {
var html = "<input type='button' value='Card Information' class='card_info_popup'></input>";
_elem.find(".ui-tooltip-content").html(html);
},
200);
},
track: false,
show: 100
});
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
You're using event delegation wrongly here since .container is not the child of your input with class card_info_popup, so you need to use:
$('body').on('click', '.card_info_popup', function() {
alert('click');
});
instead of:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
Updated Fiddle
change:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
to
$(document).on('click', '.card_info_popup', function() {
alert('click');
});
Updated Fiddle
Try this.
You have to use event delegation to enable the click event on the newly created tooltip button
http://learn.jquery.com/events/event-delegation/
$(document).on('click', '.card_info_popup', function() {
alert('click');
});
You have to delegate on('click'); to a static element then bind it to the dynamically generated popup.
I have updated your fiddle: http://jsfiddle.net/BgDxs/130/
Here is the updated code:
$('body').on('click', '.ui-tooltip input.card_info_popup', function() {
alert('click');
});
I have this code
$("td").hover(function(){
$(this).find('a.btn').show();
}, function(){
$(this).find('a.btn').hide();
})
How can i convert this function for new dom elements with on
$("#mytable").on('hover', 'td', function(){
$(this).find('a.btn').show();
}, function(){
$(this).find('a.btn').hide();
});
But using the 'hover' pseudo event as a substitute for passing 'mouseenter mouseleave' is deprecated, so you should really use mouseenter and mouseleave directly.
$("#mytable").on('mouseenter', 'td', function(){
$(this).find('a.btn').show();
})
.on('mouseleave', 'td', function(){
$(this).find('a.btn').hide();
});
Or like this:
$("#mytable").on({'mouseenter': function(){
$(this).find('a.btn').show();
}, 'mouseleave': function(){
$(this).find('a.btn').hide();
}}, 'td');
Or shorter like this:
$("#mytable").on('mouseenter mouseleave', 'td', function(e){
$(this).find('a.btn').toggle(e.type === 'mouseenter');
});
I would do it like this:
$('td').on({
mouseenter: function() { $(this).find('a.btn').show() }
mouseleave: function() { $(this).find('a.btn').hide() }
})
Edit: It's not clear by your question if you need delegation in that case check out the other answer.