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.
Related
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/
For dynamically created content, I am using the 'on' method to handle events. That works fine with click but not with hover.
Here is the code:
$(document).on('click', 'li', function(){
alert('a');
});
Works but
$(document).on('hover', 'li', function(){
alert('a');
});
does not.
Is the code wrong? Or the problem arises cause of something else on my setup.
"hover" pseudo-event
As of 1.9, the event name string "hover" is no longer supported as a synonym for "mouseenter mouseleave"
You need to use mouseenter and mouseleave event
$(document).on('mouseenter', 'li', function(){
alert('a');
});
$(document).on('mouseleave', 'li', function(){
alert('a');
});
You can also use alternate syntax
$(document).on({
mouseenter: function () {
},
mouseleave: function () {
}}, "li");
Do not confuse the "hover" pseudo-event-name with the .hover() method
You should use mouseenter
$(document).on('mouseenter', 'li', function(){
alert('a');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
<li>sdada</li>
</ul>
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');
});
This is my code:
$rows
.on('mouseover', '.row', function () {
$(this).find('.label').show();
})
.on('mouseout', '.row', function () {
$(this).find('.label').hide();
});
Can it be DRYed out?
You can bind both events, listen to event.name and then use jQuery.fn.toggle
$userRows.on('mouseover mouseout', '.row', function(event) {
$(this).find(".label").toggle( event.name == "mouseover" );
});
Im pretty sure you can also use jQuery.fn.hover:
$userRows.on('hover', '.row', function(event) {
$(this).find(".label").toggle( event.name == "mouseenter" );
});
or even:
$userRows.on('hover', '.row', function(event) {
$(this).find(".label").toggle();
});
What about:
$rows.hover(
function(){
$(this).find('.label').toggle();
},
function(){
$(this).find('.label').toggle();
}
);