We Keep Coding

Mouse leave not firing (nested)

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/

JQuery Tooltip Not Allowing Button to be Clicked

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');
});

Fire jquery effect once for each mouseover

How can I stop a jquery effect after it's first execution on a mouseover? I want the box to bounce once and stop even if the mouse remains inside the box and repeat this for every time the mouse goes back into the box. Currently it runs the effect infinitely when mouse is inside the box. Thanks in advance.
I have made an example on jsfiddle
I tried:
one("mouseover", function() { $( "#div1" ).effect("bounce", "slow"); });
However this will not fire the event again when you leave the box and come back into it.

.one() works:
$( "#div1, #div2" ).one('mouseover', function() {
$(this).effect("bounce", "slow");
});
Demo: http://jsfiddle.net/Rxhzg/1/
UPDATE (based on updated question)
If by "on mouseover once" you mean just "one bounce" - add times parameter:
$( "#div1, #div2" ).mouseenter(function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
DEMO 2 http://jsfiddle.net/Rxhzg/4/

$( "#div1, #div2" ).one('mouseover', function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
$( "#div1, #div2" ).mouseleave(function() {
$(this).one('mouseover', function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
});
check this http://jsfiddle.net/Rxhzg/6/
OR check this one http://jsfiddle.net/Rxhzg/8/ because the above one will continue bounce if mouse is at bottom of box.
$( ".parentDiv" ).one('mouseover', function() {
$(this).find('.navBox').effect("bounce", { times: 1 }, "slow");
});
$( ".parentDiv" ).mouseleave(function() {
$(this).one('mouseover', function() {
$(this).find('.navBox').effect("bounce", { times: 1 }, "slow");
});
});

This example is similar to other answers, however it abstracts the original bind into a function for reusability.
var $target = $( "#div1, #div2" );
function bounce() {
$target.one('mouseover', function () {
$(this).effect("bounce", { times: 1 }, "slow");
});
}
$target.on('mouseout', bounce);
bounce();

How to convert hover function with on in jquery

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.

hover out function

jQuery("#markets_served").hover(function(){
jQuery.data(document.body, "ms_height", jQuery(this).height());
if(jQuery.data(document.body, "ms_height") == 35) {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
}
});
jQuery("#btn_ms_close").hover(function(){
jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
jQuery("#markets_served").stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery(this).css("display","none");
});
Problem with hovering out. It wont work. It wont hover out when the mouse is out of the content that appears on hover.
http://uscc.dreamscapesdesigners.net/ - example at the bottom " Markets Covered"

Take a look at the hover declaration on the jQuery site. You can specify a handler for the mouseover and mouseout event in one swoop. No need to calculate heights or bind another handler to a new div that appears.
$("#markets_served").hover(
function () {
//do this when over
},
function () {
//do this when out
}
);

Use is like:
$('#el').hover(function(e) { /* hover; */ }, function(e) { /* unhover */ });
here is documentation

Or simplier without data:
jQuery("#markets_served").hover(function() {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
}, function() {
jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","none");
});

When mouse comes in you increase the height of the div but you dont reset it when mouse is outside the div hence the issue.
You should do something like this:
jQuery("#markets_served").hover(
function(){
jQuery.data(document.body, "ms_height", jQuery(this).height());
if(jQuery.data(document.body, "ms_height") == 35) {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
} ,
function(){
jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","none");
}
});