jQuery hide if clicked outside the button - javascript

I want to show a paragraph by clicking on the button with the jQuery. But when it is visible, then I want to hide it by clicking anywhere else than the button (ie. anywhere outside the button).
For example, here is my code:
<p style="display: none">Hello world</p>
<button>Say Hello</button>
jQuery:
$("button").click(function () {
$("p").show();
});
here is jsfiddle link:
http://jsfiddle.net/k9mUL/
How can I hide it by clicking outside the button? Thanks

You could bind a click event handler to the document, as well as the one on the button. In that event handler, hide the p element:
$("button").click(function (e) {
$("p").show();
e.stopPropagation();
});
$(document).click(function() {
$("p").hide();
});
You need to stop the propagation of the click event in the button click event, otherwise it will bubble up to the document and the p element will be hidden again straight away.
Here's a working example.

You can take advantage of event bubbling by binding your handler to the click event of the document and using event.target to determine if the user clicked the button or something else in the document:
$(document).click(function(event) {
if ($(event.target).is("button")) {
$("p").show();
} else {
$("p").hide();
}
});

Although doing it manually is great, there is a plugin which allows you to add this functionality of it helps you:
http://benalman.com/projects/jquery-outside-events-plugin/

You can bind an event handler to the click event on the whole document and check if the targeted element is not a button:
$(document).click(function(e){
if(e.target.nodeName.toLowerCase() != 'button')
$('p').hide();
});
Or here's a more "jquery" way :
$(document).click(function(e){
if(!$(e.target).is('button'))
$('p').hide();
});
Live DEMO.

<p style="display: none">Hello world</p>
<button onclick='show(event);'>Say Hello</button>
function show(e){
$("p").show();
e.cancelBubble = true;
document.addEventListener('click',hide,false);
}
function hide(){
$("p").hide();
document.removeEventListener('click',hide,false);
}

Related

How to make a clickable banner

I have a div and there is a link inside. When I click on a div, it should open the link (ex: google.com) but when I click the button it should open another link.
<div class="sc-banner">
Button
</div>
$(".sc-banner").click(function (event) {
event.stopPropagation();
window.open ('http://google.com', "_blank");
});
The issue is because the click event from the a is propagating up the DOM and firing the click handler on the div.
You can fix this in a couple of ways. Firstly, check what the event target was in the div handler:
$(".sc-banner").click(function(e) {
e.stopPropagation();
if (e.target.tagName !== 'A')
window.open('http://google.com', "_blank");
});
Alternatively you could add another event handler to the a which calls stopPropagation():
$(".sc-banner").click(function(e) {
e.stopPropagation();
window.open('http://google.com', "_blank");
});
$(".sc-banner a").click(function(e) {
e.stopPropagation();
});

How to detect if a specific class link was clicked inside a DIV and override the DIV's click action then?

I have several DIV of the following kind on my page:
<div class='entry'>
This is a statement
<a title="Search #travel" class="app-context-link" href="">#travel</a>
</div>
When a DIV of class .entry is clicked I trigger the following:
$(".entry").on('click', function(e) {
console.log("DIV Clicked");
});
When a link of the class .app-context-link is clicked I trigger the following:
var context_links = document.getElementsByClassName('app-context-link');
for (var k=0;k<context_links.length;++k) {
context_links[k].addEventListener('click', function(e) {
console.log("The context link inside DIV is clicked");
});
}
The question:
Right now when I click on the app-context-link both actions seem to be triggered: for the DIV (because a .click event is detected) and for the link (because there's an event listener on a link of that class).
How do I make it that if the link is clicked the DIV on click jQuery is not triggered?
I tried several possibilities, nothing worked. Also I would prefer not to reorganize the code too much, but simply add some directive in the on click jQuery part so that it detects if a link was clicked and does not do what it would normally do if the DIV was clicked.
Thank you!
you can use like this
$(".entry").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$(".entry a").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).prop("tagName"));
});
DEMO
Use stop propagation :
context_links[k].addEventListener('click', function(e) {
e.stopPropagation(); //Here
console.log("The context link inside DIV is clicked");
});
This will stop the click event from bubbling, so when you click on the a, click events of its ancestor will not trigger.

Jquery disable click event for div

Let's say I got a simple click event for a HTML div.
If I click on the div it should trigger a fadeToggle.
In that div I got another div with another trigger.
On that click event it should do something but instead of doing the event it triggers the first event.
How do I prevent event 1 from triggering if I want event2 to trigger?
Event1 should trigger only if I don't press the clickevent on the second event everything else should trigger as usual.
Thanks for your time
HTML
<div id="1">
Event 1
<div id="2">
<div id="3">
but here is something as well event2
</div>
</div>
</div>
JavaScript
$("#1").click(function() {
$(this).slideToggle();
});
$("#3").click(function() {
$(this).css("background-color", "blue");
});
Fiddle: http://jsfiddle.net/VLcxJ/
$("#3").click(function(e) {
e.stopPropagation();
$(this).css("background-color", "blue");
});
After that, clicks on #3 won't reach #2 or #1
Use event.stopPropagation(); :
$("#e3").click(function(event) {
event.stopPropagation();
$(this).css("background-color", "blue");
});
See it working here : http://jsfiddle.net/bYn22/
Note from jQuery API (I couldn't explain it better) : event.stopPropagation() > Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
And note that your IDs can't begin with a number :)
$("#3").click(function(event) {
event.stopPropagation();
$(this).css("background-color", "blue");
});
Added Fiddle: http://jsfiddle.net/VLcxJ/1/
Here is the solution
$("#1").click(function() {
$(this).slideToggle();
});
$("#3").click(function(event) {
event.stopPropagation();
$(this).css("background-color", "blue");
});
http://jsfiddle.net/tR7h9/3/

Assigning a click-event-handler inside a click-event

I have encountered some strange behavior when dealing with click-events in jQuery.
Have a look at this Fiddle
$('#button').click(function() {
$(document).one('click', function() {
alert('clicked');
});
});
This code is binding a click-event-handler to some button. On clicking this link, an event-handler should be added to the document, alerting "clicked" when the document is next clicked.
But when clicking this button, "clicked" gets immediately alerted without another click. So apparently the click-event which binds the new handler to the document gets bubbled to the document and immediately runs the just assigned hndler.
This behavior seems very counter-intuitive. My intention was showing an element when clicking on the button and hiding it again on clicking outside this element.
$('#button').click(function() {
// Show some element
$(document).one('click', function() {
// Hide the element again
});
});
But this results in the element being hidden immediately.
Does anyone have a solution to this problem?
The event can be prevented from propagating up the DOM.
$('#button').click(function(e) {
e.stopPropagation();
$(document).one('click', function(e) {
alert('clicked');
});
});
JS Fiddle: http://jsfiddle.net/7ymJX/6/
can you please check this code Demo
HTML Code
<button id="button">Click me!</button>
<div id="new_div"></div>
Jquery
$('#button').click(function(e) {
e.stopPropagation();
$('#new_div').css('display', 'block');
$('document, html').click( function() {
alert('clicked');
$('#new_div').css('display', 'none');
});
});
Css
#new_div {
height: 100px;
width: 200px;
border:1px solid black;
display : none;
}
Stop it going to bubble with stopPropagation :)
edited fiddle with element hiding incorporated.
http://jsfiddle.net/AdamMartin121/7ymJX/12/

Jquery - hide on click anywhere on document

I have a div that hides whenever you click outside of it but I'm having some trouble getting certain links inside the div to work (and not hide the div).
$(document).click(function() {
fav.hide();
});
theDiv.click(function(e) {
e.stopPropagation();
});
That is what I have for the whole clicking outside and closing event. Heres the thing: I have two types of links in my div, one regular link and another which is a javascript one. The regular one redirects OK but the javascript one doesn't do anything.
Could somebody help me out? Thanks.
EDIT:
Here are the bits of my code that might help out
var fav = $('#favorites');
// Open & close button
$('#favorites_a').click(function(e) {
e.stopPropagation();
e.preventDefault();
fav.toggle();
});
$('a.c',fav).live('click', function(e) {
alert('hey');
});
$(document).click(function() {
fav.hide();
});
fav.click(function(e) {
e.stopPropagation();
});
HTML (built after page load):
<div id="favorites">
<div class="wrap">
<ul><li>AB</li></ul>
</div>
</div>
This could be a problem with the live() click event handler. When you use live the event handler is actually attached to the document. So the event needs to bubble up to the document, but your click event handler on fav prevents bubbling up.
It works with delegate though:
fav.delegate('a.c', 'click', function(e) {
alert('hey');
});
Here, the event handler is added to fav.
DEMO
I think your code for fav is preventing the 'B' link from working. Instead of .live(), try:
$('a.c').click(function() { ... });
instead.

Categories