Develop Reference

Why when faking a click on a link with document.getElementById("tabkategorierna").click(); all links stops working?

I have a link(link1) in my top navbar that opens a sliding down menu with links to different page(on desktop) . It sets a flag and then checks if it is opened or not when you click the link.(this works as it should-opening and closing the menu)
var flagga=true;
$$(document).on("click",".openstoramenyn", function(){
if(flagga){
$$(document).find('.storamenyn').animate({"top":"59px"}, { duration:300, easing: 'linear'});
flagga = false;
}else{
$$(document).find('.storamenyn').animate({"top":"-"+hojden+"px"}, { duration:300, easing: 'linear'});
flagga = true;
}
});
Then in that menu I have a link(link2 with id=tabkategorierna) that opens the popup menu.
Now, if I click on the link2 to open a popup menu it works every time to open the popup menu and link1 is always working.
But if I instead open the popup with the key event "s"(for search) then after the popup menu is closed, link1 is not working anymore - it won´t open the top menu!?
When I click on the key "s" on my keyboard I run a click event on the id=tabkategorierna to trigger it to fake a click on the link with id=tabkategorierna.
So this is the code for opening the popup with the key "s" and faking a click on the id=tabkategorierna link.
var mykeysearchFunc;
mykeysearchFunc = function(event) {
//o=79 s=83 f=70
if ((event.keyCode === 79) || (event.keyCode === 83) || (event.keyCode === 70)){
// Trigger the button element with a click
document.getElementById("tabkategorierna").click();
console.log(flagga)
event.preventDefault();
}
if ((event.keyCode === 67) || (event.keyCode === 27)){
app.popup.close();
event.preventDefault();
}
}
document.addEventListener("keydown", mykeysearchFunc)
So why does it work if I actually click on the link to open the popup menu and not when it is opened by running document.getElementById("tabkategorierna").click();
What is the difference between actually clicking on the link and run the fake click on it?
Why does link1 stop working after I run document.getElementById("tabkategorierna").click(); ?
Any help really appreciated, thanks.
If you click on the top "MENY" and then"TEST KATEGORIER" you will get the popup menu. if you just hit enter it will close and load a page. Thats how it should work. Now, if you instead open the popup menu with the key "s", it opens the popup menu and then you hit enter and it will load the search page again as it should. But now comes the problem, if you click on the first link you clicked the "MENY", it will not work anymore. That is my problem. https://xn--tervinnmera-w8a.se

You need to stop the animation when it has completed its action. It is hijacking other page elements from working on your page.
Try this code:
$$(document).find('.storamenyn').stop();
You can refer to this https://api.jquery.com/stop/

jQuery close menu auto closing

Building a mobile menu and would like when the user clicks on the document, not the menu to close the menu if its open.
Problem is that when the first click is fired to open the mobile it automatically closes. I'm struggling to get this bit to work.
The code recognises the click so the window is detecting the right action. I'm just missing one final step I think.
Code is:
$('.mobile-menu-button').click(function(e) {
e.preventDefault();
$('.mobile-menu').slideToggle('slow');
});
// close on off click
$(window).click(function(e){
e.preventDefault();
e.stopPropagation();
if($('.mobile-menu').css("display") == 'block') {
$('.mobile-menu').slideToggle();
console.log('click');
}
});
Thanks

You can use event delegation. When you click on '.mobile-menu', you open it or close it, when you click somewhere else you only close it.
$(window).on('click', function(e){
e.preventDefault();
if ($(e.target).hasClass('mobile-menu-button')) {
$('.mobile-menu').slideToggle('slow');
} else {
$('.mobile-menu').css('display') === 'block' && $('.mobile-menu').slideUp();
}
});
a basic example on this fiddle: https://jsfiddle.net/6e7atrmn/2/

Collapse bootstrap button on click outside

I am using this code, which is taken almost out of the box from the bootstrap docs, to get a simple collapse behaviour for a button (I converted the button to a link):
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTree" aria-expanded="false" aria-controls="collapseTree">
<b>click me</b>
</button>
<div class="collapse" id="collapseTree">
<div class="well">
<h6>Example text goes here</h6>
</div>
</div>
Now, what I am trying to do is to be able to close the text when the user clicks outside the button. I know that is asked many times in stack overflow but jQuery is NOT AT ALL intuitive ! at least for a beginner like me, so I am not really able to adapt any of the solutions proposed on this SO answer to get the desired behaviour.
For example, I am using this script (concept borrowed from here to try to control the outside click behaviour of the above code :
<script>
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".btn-link").hasClass("collapse");
if (_opened === true && !clickover.hasClass("data-toggle") && clickover.parents('.btn-link').length == 0) {
$("button.data-toggle").click();
}
});
});
</script>
but of course with no luck. Any hint would be greatly appreciated !
UPDATE
Another try with no luck here.

you could use the following:
//handling the hiding when clicking anywhere else in the document
$(document).mouseup(function(e)
{
var container = $('.btn-link');
if (container.has(e.target).length === 0) {
// the closing function
}
});

This is how I did it in Coffeescript for Bootstrap 4 with a non-standard navbar.
$(document).click (e)->
#console.log e.target
unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
$('#toggle-menu').collapse('hide')
So basically, unless you click the button or the menu, close the menu.
Note: Strange, on iOS clicking on text doesn't register a click event, nor a mouseup event. Clicking on an image does fire events though. Don't know how to fix this.

Closing Bootstrap Popover When User Clicks Outside Popover

I have some content that's dynamically loaded on a webpage that contains popovers. For this reason I have to bind them to the body so they load and appear correctly.
I'd like to find a way to hide the popovers when a user clicks outside the popover or on another popover trigger.
I found that if I "hide" the popover, the popover does indeed hide but the elements remain in the DOM. This means that active links in the popover remain "clickable".
If I instead destroy the popover, it hides, but is unable to re-activate if clicked on. The only reliable way to hide the popover is to use "toggle". This increases the complexity of determining which popovers to hide.
Please see this JSFiddle with all this code.
HTML
Yahoo
<br><br> <br> <br> <br> Google
<br><br> <br> <br> <br> Microsoft
JavaScript
$('.some-popover-link').popover({
container: 'body',
html: true,
placement: 'bottom'
});
$(document).click(function (e) {
$('.some-popover-link').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide'); // this hides popover, but content remains
return;
}
});
});

This relies on internal implementation so be careful but it should work. JSFiddle Link
if ($(this).data('bs.popover').tip().hasClass('in')) {
$(this).popover('toggle');
}

Use this code:
$(document).mouseup(function (e) {
if ($('.popover').has(e.target).length === 0) {
$('.popover').toggleClass('in').remove();
return;
}
});

Bootstrap popover not working on iPad

I've got a bootstrap popover working so:
Popover opens on click
Popover closes when you click outside the popover
Popover has default href for if JS is disabled
Code is:
<a class="badge badge-popover"
data-original-title="title here"
data-trigger="focus"
data-placement="right"
data-content="<p>Content Here</p>" data-html="true"
href="/help">?</a>
$('.badge-popover').click(function(e){
e.preventDefault();
}).popover();
It's working fine across all browsers, but not on the iPad. Any ideas why? Where am I going wrong?
Thanks :)
I am using Jquery 1.9.1, bootstrap 2.1.1

Try to use the hover event:
This should trigger the Popover on Desktop via hover and on mobile/tablet via click(touch).
<a class="badge badge-popover"
data-original-title="title here"
data-placement="right"
data-trigger="hover"
data-content="<p>Content Here</p>" data-html="true"
href="/help">?</a>

Refer following code snippet to get it works:
$('[data-toggle="popover"]').popover();
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
This is the easiest way of detecting clicks on the body and close all the tooltips on the page.
You can check the live example here
Thanks!

Just encountered the same problem. Changing data-trigger="focus" to data-trigger="click" works. Hover also works.

Changing data-trigger="focus" to data-trigger="click" works almost ok, but the problem is that the popover remains open even when you click outside of it and you can close it only if you click on the element, that initiated the popover...