We Keep Coding

Jquery click input field show div, click body hide div

I have an input field when you click on it, it will show/display a div below it.
Once the div is displaying, if you click in the div the div will remain showing (display block), and if you click off the div (on the body) the div will disappear (display none).
$("#input-field").click(function() {
$("#div").show();
$("#div").ready(function(){
if ($('#div').css('display') == 'block')
{
$(document).click(function(e) {
if (e.target.id != 'div' && !$('#div').find(e.target).length) {
$("#div").hide();
}
});
}
});
});
Problem is, this works fine one single time (click on the input field, the div shows, then click on the body and the div disappears), but if I click back on the input field nothing happens.
I've been wrestling with this for hours...
https://jsfiddle.net/n8671asp/1/

Just change the event click to mouseup. Hope it will work.
$(document).mouseup(function(e) {
if (e.target.id != 'div' && !$('#div').find(e.target).length) {
$("#div").hide();
}
});

You might not want this, but instead of seeing if the target is not the input, how about you just focus on .focus() and .focusout()? These functions control when you can type in the input and when you cannot.
$("#input-field").focus(function() {
$("#div").show();
});
$("#input-field").focusout(function(e) {
$("#div").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- example HTML -->
<div id="div">I'm the div</div>
<input val="input to click" id="input-field">

jquery input field focus out except a div

I'm making ajax suggestion of search in which,
a suggestion box will be displayed
<div id="searchbox">
<input type="text" name="search" class="searchinput"/>
</div>
<div id="sugbox">
......
<a href="product.php?id=2" >Item 1</a>
.....
</div>
and Javascript
$('#searchbox .searchinput').focus(
function () {
$('#searchbox #sugbox').show();
});
$('#searchbox .searchinput').focusout(
function () {
$('#searchbox #sugbox').hide();
});
The suggestion box will open if the search textbox #searchbox .searchinput is focus and hide if focusout.
Problem : whenever i'm clicking the link on suggestion box, the suggestion box hides (because of input focusout event).
How can i check if the target div is the suggestion box so don't hide the box
ex ..
$('#searchbox .searchinput').focusout(
function () {
if(target div is not sugbox)
$('#searchbox #sugbox').hide();
});

try to assign a class to sugbox at hover class
$(".searchinput").focus(function(){
$("#sugbox").show();
});
$(".searchinput").focusout(function(){
if(!$("#sugbox").hasClass("hovered"))
$("#sugbox").hide();
});
$("#sugbox").hover(function(){
$(this).addClass("hovered");
},function(){
$(this).removeClass("hovered");
});
here is example at jsfiddle : http://jsfiddle.net/kyawlay/9wg49L2b/5

add a mousedown handler (triggerd before focusout/blur I think) on the box also, set a flag to true when clicked, then check this flag before hidding
var boxClicked = false;
$('#mainsearch .searchinput').mousedown(// listen click handler
function () { boxClicked = true;});
$(document).mousedown(// reset boxclicked
function () { boxClicked = false;});
$('#searchbox .searchinput').focus(
function () {
$('#searchbox #sugbox').show();
});
$('#mainsearch .searchinput').focusout(
function () {
if(!boxClicked) $('#mainsearch #sugbox').hide();// add condition
});

You are using wrong selector. Check this demo. http://jsfiddle.net/m711LLwr/
$('#searchbox #sugbox').show();
Should be
$('#mainsearch #sugbox').show();

Try this, What it does is when searchinput loses focus then if sugbox has no class 'NoHide', then hide it.
On body on click event, the NoHide class is assigned to sugbox if click target is not searchinput and not sugbox and not sugbox anchor.
If event target is not in above 3 mentioned selectors then remove class NoHide. I have a fiddle but I want you to try in your page as fiddle will confuse you( as it has iframe and body area of fiddle is limited).
$('#searchbox .searchinput').focus(
function () {
$('#sugbox').show();
});
$('#searchbox .searchinput').focusout(
function (event) {
if(!$('#sugbox').hasClass('NoHide'))
$('#sugbox').hide();
});
$('body').on('click',
function (event) {
if(!$(event.target).is(".searchinput") && !$(event.target).is("#sugbox a") && !$(event.target).is("#sugbox")){
$("#sugbox").hide().removeClass('NoHide');
}else
{
$("#sugbox").show().addClass('NoHide');
}
});

Click on parent, ignore its children [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery: click function exclude children.
I have two divs, something like this:
<div id="parent" style="width: 100%; height: 100%; background-color:red;" />
<h1>I'm the parent!</h1>
<div id="child" style="width: 300px; height: 200px; background-color:yellow;">
</h2>..and I'm the child!</h2>
</div>
</div>
Additionally, I have the following JavaScript code:
$(document).ready(function(){
$('#parent').click(function(){
alert('Parent was clicked');
});
});
The problem is, if I click on the child, the event is triggered. How can I limit this event to the parent only?
Edit: Just to clarify; I want this action to trigger when the user clicks anywhere in the red. As said in the comments; the h1 is not the parent. Tjirp's answer did the trick, and there's a lots of working variants of this solution in the answers.

This should work
$(document).ready(function() {
$('#parent').click(function(e) {
if (e.target == this) {
alert('Parent was clicked');
}
}
}
This way you won't have to bind anything to your childs. The click event is propagated to your click handler, and it checks if the target of the click event is indeed the element you added the event on.
Edit: I was right. this is not the most efficient way, Alessandro Minoccheri answer should be way faster. I updated my code with his.

Try this:
$('#parent').click(function(data, handler){
if (data.target == this) {
//Do Stuff (only element clicked, not children)
}
});

h1 is not the parent, div#parent is the parent.
clicking div#child triggers click on div#parent because of event bubbling.
this will prevent event bubbling:
$('#child').on("click", function() {
return false;
});

The easiest solution is to check that the element that originated the event (event.target) is the same as the element handling the click event handler (this):
$('#parent').click(function(event){
if(this === event.target) {
alert('Parent was clicked');
}
});
Here's a working jsFiddle.

You can try something like:
$(document).ready(function(){
$('#parent h1').click(function(){
alert('Parent was clicked');
});
});

$(document).ready(function(){
$('#parent').click(function(){
if($(this).not("#parent")) {
return false;
} else {
alert('Parent was clicked');
};
});
});

jquery selector help. Everything but the specified selector

I have the following function to open an overlay menu:
$('.context-switch').click(function() {
$(".context-switch-menu").toggle();
});
To hide the menu, I would like the user to be able to click on any area outside ".context-switch-menu"
I am trying with :not() but with no success..

$('body').click(function(e) {
if ($(e.target).hasClass('context-switch')) {
return;
}
$(".context-switch-menu").hide();
});
$('.context-switch').click(function() {
$(".context-switch-menu").toggle();
return false;
});

The reason this can be difficult is because of event bubbling.
You can try something like this:
$('.context-switch').click(function(e) {
e.stopPropagation();
$(".context-switch-menu").toggle();
});
$(".context-switch-menu").click(function(e){
e.stopPropagation();
});
$("body").click(function(e){
$(".context-switch-menu").hide();
});
The e.stopPropagation() prevents the click event from bubbling to the body handlers. Without it, any click to .context-switch or .context-switch-menu would also trigger the body event handler, which you don't want, as it would nullify the effect of the .context-switch click half the time. (ie, if the state is hidden, and then you click to show, the event would bubble and trigger the body handler that would then hide the .context-switch-menu again.)

Without testing, would something like this work?:
$('.context-switch').click(function() {
$(".context-switch-menu").show();
});
$(document).click(function() {
$(".context-switch-menu").hide();
});
Instead of using document, 'html' or 'body' may work as well.

$(document).on('click', function(e) {
if (e.target.className !='context-switch-menu') {
$(".context-switch-menu").hide();
}
});

Just an idea here, based on what what others have suggested in the past:
$(document).click(function(e){
//this should give you the clicked element's id attribute
var elem = $(e.target).attr('classname');
if(elem !== 'context-switch-menu'){
$('.context-switch-menu').slideUp('slow');
//or however you want to hide it
}
});

try this, we don't want to call a function when you clicked on the element itself, and not when we click inside the element. That's why we need 2 checks.
You want to use e.target which is the element you clicked.
$("html").click(function(e){
if( !$(e.target).is(".context-switch-menu") &&
$(e.target).closest(".context-switch-menu").length == 0
)
{
alert("CLICKED OUTSIDE");
}
});
Live fiddle: http://jsfiddle.net/Xc25K/1/

jQuery making selection

I have a nested div like this
<div id="one">
<div id="two">
id two goes here
</div>
<div id="three">
id three goes here
</div>
<div id="four">
id four goes here
</div>
</div>
Now i want to handle click and doubleclick events on all divs except in div#four,
like this
$('#one').live('dblclick', function() {
my javascript code goes here
});
('#one').live('click', function() {
my javascript code goes here
});
How can i use the above script and exclude the last nested div #four.
Thanks

Like this:
$('#one, #one > div').not('#four').delegate('dblclick, click', function(){
// my javascript code goes here
});

EDIT: Based on further clarification, try this:
$('#one').bind('click dblclick', function( event ) {
var id = event.target.id;
if(id == "one" || id == "two" || id == "three") {
if(event.type == "click") {
// code for click event
} else {
// code for double click event
}
}
});​
EDIT: Based on our conversation under another answer, it seems like you want the #one element to be clickable, but none of its child elements. If that is right, try this:
$('#one').click(function() {
// code to run when `one` is clicked.
}).children().click(function( event ) {
event.stopPropagation();
});
Now if there's any text in #one, the code for that element will fire, but it will not fire when you click any children of #one.
Let me know if that was what you wanted.
EDIT:
If you are saying that you will have a dynamic number of elements inside #one, and the last one will not get the event, then do this:
$('#one').delegate('div:not(:last-child)', 'click dblclick', function( event ) {
if(event.type == 'click') {
// do something for the click event
} else {
// do something for the double click event
}
});​
Note that this assumes there will not be nested divs. Results may be unexpected if there are. Also, the #one element doesn't fire events. Only its children.
Original answer:
$('#one,#two,#three').bind('click', function(){
// code for click event
})
.bind('dblclick', function() {
// code for double click event
});
Or replace .bind with .live if you really need it.

I would use an additional class:
HTML:
<div id="one">
<div id="two" class="clickable">
id two goes here
</div>
<div id="three" class="clickable">
id three goes here
</div>
<div id="four">
id four goes here
</div>
</div>
JS:
('.clickable').live('click', function() {
});

Use not method, more on this here: How can I exclude these elements from a jQuery selection?

You must use $('#one') instead $('.one') aren't you?

$("div:not(#four)")
or
$("#one :not(#four)")
Will select any div that does not have the id="four" set. Basically the :not is what you are looking for. Anything in the :not parenthesis is negated for selection purposes.
http://api.jquery.com/not-selector/
An alternative is to attach a single click/double click handler to the parent which means no need for .live or anything, and in the handler ensure that you are receiving a click from an acceptable child with $(event.target).is(":not(#id)")
$("#one").click(function(event) {
if (this != event.target && $(event.target).is(':not(#four)')) {
// do work on event.target
}
});
// ...