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');
});
Related
I have a page with a jQuery UI tooltip that is initially opened and its closing on mouseout event is disabled.
Now, I want the tooltip to close after a user clicks on it itself, not on the element for which the tooltip is shown (as many other answers here).
As one of the possible solutions, I thought I can add a click handler to the tooltip's div and close it from there. But I can't find a standard way to obtain the tooltip's div with the Tooltip widget API or attach the handler in some other way.
Am I on the right track with the approach above? Or how to achieve what I am after in a different way?
JSFiddle illustrating what I have for the moment.
I've found a relatively simple solution without hacking the Tooltip API via attaching a click handler in the tooltip's open event and closing the tooltip there:
$('.first')
.tooltip({
content: 'Click to close',
position: { my: 'left center', at: 'right center' },
items: '*'
open: function (event, ui) {
var $element = $(event.target);
ui.tooltip.click(function () {
$element.tooltip('close');
});
},
})
.tooltip('open')
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
JSFiddle
Try this:
$(document).ready(function(){
$('.first')
.tooltip({ content: 'Click to close', position: { my: 'left center', at: 'right center' }, items: '*' })
.tooltip('open')
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
})
// when the tooltip opens (you could also use 'tooltipcreate'), grab some properties and bind a 'click' event handler
.on('tooltipopen', function(e) {
var self = this, // this refers to the element that the tooltip is attached to
$tooltip = $('#' + this.getAttribute('aria-describedby')); // we can get a reference to the tooltip via the `aria-describedby` attribute
// bind a click handler to close the tooltip
$tooltip.on('click', function() {
$(self).tooltip('close');
});
});
});
Updated JSFiddle
jQuery UI Tooltip API
Try this:
$(document).ready(function(){
$('.first').on('mouseout focusout', function(event) {
event.stopImmediatePropagation()
})
.tooltip({ content: 'Click to close', position: { my: 'left center', at: 'right center' }, items: '*' }).tooltip('open');
$( "body" ).delegate( ".ui-tooltip", "click", function() {
$('.first').tooltip('close');
});
});
See fiddle here
Based on Alexes answer if you wanted to close only on hitting "X":
$(".t1").tooltip({
content: "<div><div class='tit'>Some super titlet</div> <div class='x'>x</div><div class='con'>Some content super super long</div></h1>",
disabled: true,
width:550,
tooltipClass: "myClass",
open: function (event, ui) {
var $element = $(event.target);
ui.tooltip.each(function () {
$("div.x",this).click(function () {
$element.tooltip('close');
});
});
},
}).on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$(".tooltip").click(function() {
$(this)
.tooltip("open")
});
See it here: http://jsfiddle.net/analienx/h639vzaw/73/
I have the following javascript object:
TeamExpand = {
trigger: '.team-info h2.initial',
container: '.team-info',
closeTrigger: '.team-info h2.expanded',
init: function() {
jQuery(this.trigger).click(this.expandInfo.bind(this));
jQuery(this.closeTrigger).click(this.closeInfo.bind(this));
},
expandInfo: function(e) {
jQuery(e.currentTarget).closest('.team-info').css("height", "100%");
jQuery(e.currentTarget).removeClass("initial");
jQuery(e.currentTarget).addClass("expanded");
jQuery(this.socialSVG).attr("fill", "#ffc40c");
},
closeInfo: function(e) {
jQuery(e.currentTarget).closest('.team-info').css("height", "64px");
jQuery(e.currentTarget).removeClass("expanded");
jQuery(e.currentTarget).addClass("initial");
jQuery(this.socialSVG).attr("fill", "white");
}
}
My html is as follow:
<div class="team-info">
<h2 class="initial">Header</h2>
<h3>Job Title</h3>
<p>Bio</p>
</div><!--end team-info-->
The 'expandInfo' function is running just fine and changed the 'container' height to 100%; The 'initial' class is removed from the h2 and the 'expanded' class is added to the h2. But the click event on the 'closeTrigger' variable (the h2.expanded) element is not registering. What am I doing wrong?
I'd rewrite this a bit to make the event handlers simpler. Use one handler for all the h2 and just check the class. This way you avoid attaching detaching handlers.
TeamExpand = {
trigger: '.team-info h2',
container: '.team-info',
init: function() {
jQuery(this.trigger).click(this.doTriger.bind(this));
},
doTriger: function(e) {
var element = jQuery(e.currentTarget);
if (element.hasClass('initial')) {
this.expandInfo(element);
} else {
this.closeInfo(element);
}
},
expandInfo: function(element) {
element.closest('.team-info').css("height", "100%");
element.removeClass("initial");
element.addClass("expanded");
jQuery(this.socialSVG).attr("fill", "#ffc40c");
},
closeInfo: function(element) {
element.closest('.team-info').css("height", "64px");
element.removeClass("expanded");
element.addClass("initial");
jQuery(this.socialSVG).attr("fill", "white");
}
}
I think it's because you're applying the click event function to an element that doesn't actually exist (the h2 element doesn't yet have the .expanded class).
Try moving this line of code..
jQuery(this.closeTrigger).click(this.closeInfo.bind(this));
..to the end of your expandInfo function, and add this..
jQuery(this.closeTrigger).unbind('click');
..to your closeInfo function before this line..
jQuery(e.currentTarget).removeClass("expanded");
Hope this helps!
Full code..
TeamExpand = {
trigger: '.team-info h2.initial',
container: '.team-info',
closeTrigger: '.team-info h2.expanded',
init: function() {
jQuery(this.trigger).click(this.expandInfo.bind(this));
},
expandInfo: function(e) {
jQuery(e.currentTarget).closest('.team-info').css("height", "100%");
jQuery(e.currentTarget).removeClass("initial");
jQuery(this.trigger).unbind('click');
jQuery(e.currentTarget).addClass("expanded");
jQuery(this.socialSVG).attr("fill", "#ffc40c");
jQuery(this.closeTrigger).click(this.closeInfo.bind(this));
},
closeInfo: function(e) {
jQuery(e.currentTarget).closest('.team-info').css("height", "64px");
jQuery(this.closeTrigger).unbind('click');
jQuery(e.currentTarget).removeClass("expanded");
jQuery(e.currentTarget).addClass("initial");
jQuery(this.socialSVG).attr("fill", "white");
this.init();
}
}
I have problems with Bootstrap (3.3.4) popovers. My html code for the popover is in the data-html tag, which also contains a class link_click. The jQuery click function for this class doesn't work. Why is jQuery not seeing this link_click class from data-content field of the popover? What to change?
popover = 'Main-Objekt';
$('#popover_test').html( popover );
$('[data-toggle="popover"]').popover({ trigger:"manual", animation:false})
.on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});})
.on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 100);
});
$('.link_click').click( function(){
alert('Click success!');
});
Thanks
Michael
Event delegation for dynamic content:
$('#popover_test').on('click', '.link_click', function(){
alert('Click success!');
});
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 am using jquery UI dialog to show comments or other text depending upon what is clicked.
Here is my JSfiddle link Dialog Demo
I have used the code
$('.showComments').each(function () {
var panel = $(this).parent().siblings('.divCommentDetail');
$(this).click(function () {
panel.dialog('open');
});
});
$('.showContractChanges').each(function () {
var panel = $(this).parent().siblings('.divContractChangeDetail');
$(this).click(function () {
panel.dialog('open');
});
});
$(".divCommentDetail, .divContractChangeDetail").dialog({
autoOpen: false,
modal: true,
open: function () {
$(this).parent().siblings('.ui-dialog-titlebar').addClass('ui-state-error');
},
show: {
effect: 'blind',
duration: 1000
},
hide: {
effect: 'explode',
duration: 1000
}
});
and the content is added dynamically on page load. I am trying to use $(document).on('each', '.showComments', function(e) {}); so that it can work with dynamically loaded content, but it doesn't work at all. here is my modified code.
$(document).on('each', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
$(this).click(function () {
panel.dialog('open');
});
});
but this doesn't work at all. Am i doing something wrong.
Thanks for the help.
If the .divContentDetail is added dynamically after page load, it's not the loop you need to change, but the event that you are registering:
$(document).on('click', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
panel.dialog('open');
});
.on bind event that work on dynamicly added elements. But 'each' is not an event, it's a method.
You should use on like that :
$(document).on('click', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
panel.dialog('open');
});