I am using Meteorjs for my application. Here I am stucked in a problem. I have an anchor tag. I have to functions which i called on onmouseenter
and click
event. What i did is if user click
on the anchor tag a bootbox prompt dialog box opened to edit the text of anchor tag. and if user 'mouseenter` on the anchor tag and stay there for 3 second then a function called which shows a bootstrap popover. My problem is if i click on the anchor tag and stay there for three the popover display and it hides the bootbox dialogbox which was opened on anchor tag click event.
My code is
Function called when mouse is entered on the element.
'mouseenter .edit_name': function (evt, tgt) {
timer = setTimeout( function() {
var id=$(evt.currentTarget).data("pk");
$("#edit_name_"+id).popover({title:"Objective" ,content:Objective})
$("#edit_name_"+id).popover("show")
}, 1500);
}
},
Mouse leave function
'mouseleave .edit_name': function (evt, tgt) {
$(evt.currentTarget).data("pk");
$("#edit_name_"+id).popover("hide")
clearTimeout(timer);
},
Function called on click
'click .edit_name': function (evt, tgt) {
bootbox.prompt("Module Name",function(arg1,arg2){
}
},
But when I click on the element and stay there for 3 seconds bootbox prompt goes disappear and popover is displayed. Tell me gus how can i stop popover to be displayed if i click on the element.
EDIT:
Instead of bootbox.prompt i tried this with bootstrap.editable.js like this
$(".edit_name").editable({
inputClass: 'input-large',
url: function (params) {
Meteor.call("renameItem", params.pk, params.value);
}
});
but still the same problem. when popovers display it hides the .editable input field.
Just check to see if the bootbox exists in your
setTimeout
function. If the bootbox exists, don't run the popover code.