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();
}
}
Related
Given the following jQuery .on() event map:
$('header').on({
mouseenter: function(e) {},
mouseleave: function(e) {},
}, 'li');
How can I share a var $this = $(this) variable between both the mouseenter and mouseleave events to keep it DRY?
EDIT:
To be clearer, if I want to apply the logic to each event in the event map, let's say:
mouseenter: function(e) {
// Grabs the list element.
var $this = $(this);
// Gets the sub-menu of the active menu item, if there is one.
var $subMenu = $this.find('.main-menu__sub-menu').first();
if ($subMenu.length) {
// Do something...
}
},
mouseleave: function(e) {
// Perform the same checks, and get the same variables as above...
},
click: function(e) {
// Again, perform the same checks and grab the same variables as above...
}
I obviously don't want to repeat my logic, but I require getting the li element that's firing the event, which will be the same for all events within the event map... Hopefully that makes more sense?
With your expanded description, you could go for something like this:
function getSubmenu(li) {
// Grabs the list element.
var $li = $(li);
// Gets the sub-menu of the active menu item, if there is one.
var $subMenu = $li.find('.main-menu__sub-menu').first();
return $subMenu;
}
$('header').on({
mouseleave: function(e) {
var $subMenu = getSubmenu(this)
// do some stuff...
},
click: function(e) {
var $subMenu = getSubmenu(this)
// do some other stuff...
}
}, 'li');
Not sure why you would need it since the this variable will reference to the header element on both functions..
but a way you can do it is declaring the variable outside of the scope
var $this;
$('header').on({
mouseenter: function (e) {
$this = $(this);
},
mouseleave: function (e) {
$this; // is available
},
}, 'li');
How To prevent openContent(); to kick the $("#load-content").on("transitionend each time I click .show-content ???
I'm not sure how to stop this transitionend to be kicked! Please heeeelp
$('.show-content').on('click', function (e) {
e.preventDefault();
openContent();
});
$('#load-content').on('click','.prev',function (e){
e.preventDefault();
closeContent(this);
});
function openContent(){
$('#load-content').load('../views/product-page.html');
$('.container').addClass('loaded');
$("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
$(this).addClass('animate');
var body = $("body,html");
body.animate({
scrollTop: 0
}, 800);
});
}
function closeContent(ele){
var Loaded = !$(ele).closest('.container').hasClass('loaded');
if (!Loaded) {
$('.animate').removeClass('animate');
$("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
$('.loaded').removeClass('loaded');
$('#show-content').remove();
});
}
}
generally you should namespace the event and the off the event after being fired
$el.on('transitionend.mynamespace' function(){
$el.off('transitionend.mynamespace')
});
Example:
$dropdown.on('transitionend.fadein' function() {
// some function to be called on transitionend
doSomething();
// event will not be called again
$dropdown.off('transitionend.fadein')
});
UPDATE
adapted to your code
(you are also using way too many transitionend hendlers)
I created a namespace with e subnamespace
so now you can say
.off('transitionend.loadcontent ')
.off('transitionend.loadcontent.open ')
.off('transitionend.loadcontent.close ')
Try which one will do what you need
You should generallly read this: http://api.jquery.com/event.namespace/
Also the code doesn't look too amazing.
You should consider a more consequent codingstyle and cache selectors to improve readability and performance. E.g. I replaced all " with ' since you were using mixed quotes.
Maybe run jsHint in your editor and cache all elements that are needed more than once.
But that's not really important for this thing to work.
$('.show-content').on('click', function(e) {
e.preventDefault();
openContent();
});
$('#load-content').on('click', '.prev', function(e) {
e.preventDefault();
closeContent(this);
});
function openContent() {
$('#load-content').load('../views/product-page.html');
$('.container').addClass('loaded');
$('#load-content').on('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open', function() {
$(this).addClass('animate');
var body = $('body,html');
body.animate({
scrollTop: 0
}, 800);
$('#load-content').off('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open');
});
}
function closeContent(ele) {
var Loaded = !$(ele).closest('.container').hasClass('loaded');
if (!Loaded) {
$('.animate').removeClass('animate');
$('#load-content').on('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close', function() {
$('.loaded').removeClass('loaded');
$('#show-content').remove();
});
$('#load-content').off('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close');
}
}
you might need
$ele.one('click',function(){...})
which allows you to bind the event only one time. after being fired, this event listener will unbind itself. check document here:https://api.jquery.com/one/
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');
});
As it stands the remove function doesn't work. Any suggestions?
var toggle = new function() {
$(document).on('click', 'img', function () {
$(this).parent().toggle('slide');
})
}
var remove = new function() {
$(document).on('click', 'img',
setTimeout(function () {
$(this).parent().remove();
}, 1000);
)
}
The function your are looking for is .queue(). It will execute a provided callback after the previous animation has finished:
$(document).on('click', 'img', function() {
var $entry = $(this).parent();
$entry.toggle('slide').queue(function(next) {
$entry.remove();
next();
});
});
Working example: http://jsfiddle.net/rbBgS/
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.