Develop Reference

Jquery div to open/close hidden div properly [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
I have created some code which will hide/unhide a hidden div when a div("button") is clicked. I would also like the div to be hidden when anywhere on the screen is clicked. These pieces of code seem to be conflicting with each other.
$(document).ready(function () {
$(document).on("click", "#help-icon", function () {
console.log('hi');
$("#help-menu").toggle();
});
$(document).mouseup(function (e) {
var hlpcont = $("#help-menu");
if (!hlpcont.is(e.target) &&
hlpcont.has(e.target).length === 0) {
hlpcont.hide();
}
});
});
jsfiddle: http://jsfiddle.net/CEs4c/1/

$(document).click(function (eventObj) {
if (eventObj.target.id != "help-icon") {
$("#help-menu").hide();
} else {
$("#help-menu").toggle();
}
});
EDIT: If you want to click on the div that appears without hiding it again:
$(document).click(function(eventObj)
{
if (eventObj.target.id == "help-icon") {
$("#help-menu").toggle();
} else if($(eventObj.target).hasClass("help-dropdown")) {
$("#help-menu").show();
} else {
$("#help-menu").hide();
}
});

In my test, the mouseup function fires before the click function. The mouseup function checks for the target of the event. When you click on the button, the target of the mouseup event is the button, so the mouseup function hides the div, then the click function fires and toggles the div back to visible.
What I would do instead is just check the target of the event in mouseup and skip the click event:
$(document).mouseup(function (e)
{
var hlpcont = $("#help-menu");
var hlpIcon = $("#help-icon");
if(hlpIcon.is(e.target)){
hlpcont.toggle();
}else
{
hlpcont.hide();
}
});

html div onclick event

I have one html div on my jsp page, on that i have put one anchor tag, please find code below for that,
<div class="expandable-panel-heading">
<h2>
<a id="ancherComplaint" href="#addComplaint"
onclick="markActiveLink(this);">ABC</a>
</h2>
</div>
js code
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
function markActiveLink(el) {
alert($(el).attr("id"));
}
here I when I click on div I got alert with 123 message, its fine but when I click on ABC I want message I want to call markActiveLink method.
JSFiddle
what is wrong with my code? please help me out.

The problem was that clicking the anchor still triggered a click in your <div>. That's called "event bubbling".
In fact, there are multiple solutions:
Checking in the DIV click event handler whether the actual target element was the anchor
→ jsFiddle
$('.expandable-panel-heading').click(function (evt) {
if (evt.target.tagName != "A") {
alert('123');
}
// Also possible if conditions:
// - evt.target.id != "ancherComplaint"
// - !$(evt.target).is("#ancherComplaint")
});
$("#ancherComplaint").click(function () {
alert($(this).attr("id"));
});
Stopping the event propagation from the anchor click listener
→ jsFiddle
$("#ancherComplaint").click(function (evt) {
evt.stopPropagation();
alert($(this).attr("id"));
});
As you may have noticed, I have removed the following selector part from my examples:
:not(#ancherComplaint)
This was unnecessary because there is no element with the class .expandable-panel-heading which also have #ancherComplaint as its ID.
I assume that you wanted to suppress the event for the anchor. That cannot work in that manner because both selectors (yours and mine) select the exact same DIV. The selector has no influence on the listener when it is called; it only sets the list of elements to which the listeners should be registered. Since this list is the same in both versions, there exists no difference.

Try this
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
$('#ancherComplaint').click(function (event) {
alert($(this).attr("id"));
event.stopPropagation()
})
DEMO

Try following :
$('.expandable-panel-heading').click(function (e) {
if(e.target.nodeName == 'A'){
markActiveLink(e.target)
return;
}else{
alert('123');
}
});
function markActiveLink(el) {
alert($(el).attr("id"));
}
Here is the working demo : http://jsfiddle.net/JVrNc/4/

Change your jQuery code with this. It will alert the id of the a.
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
markActiveLink();
alert('123');
});
function markActiveLink(el) {
var el = $('a').attr("id")
alert(el);
}
Demo

You need to read up on event bubbling and for sure remove inline event handling if you have jQuery anyway
Test the click on the div and examine the target
Live Demo
$(".expandable-panel-heading").on("click",function (e) {
if (e.target.id =="ancherComplaint") { // or test the tag
e.preventDefault(); // or e.stopPropagation()
markActiveLink(e.target);
}
else alert('123');
});
function markActiveLink(el) {
alert(el.id);
}

I would have used stopPropagation like this:
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
$('#ancherComplaint').on('click',function(e){
e.stopPropagation();
alert('hiiiiiiiiii');
});

Try out this example, the onclick is still called from your HTML, and event bubbling is stopped.
<div class="expandable-panel-heading">
<h2>
<a id="ancherComplaint" href="#addComplaint" onclick="markActiveLink(this);event.stopPropagation();">ABC</a>
</h2>
</div>
http://jsfiddle.net/NXML7/1/

put your jquery function inside ready function for call click event:
$(document).ready(function() {
$("#ancherComplaint").click(function () {
alert($(this).attr("id"));
});
});

when click on div alert key
$(document).delegate(".searchbtn", "click", function() {
var key=$.trim($('#txtkey').val());
alert(key);
});

X-Editable: stop propagation on "click to edit"

I have an editable element inside a div which itself is clickable. Whenever I click the x-editable anchor element, the click bubbles up the DOM and triggers a click on the parent div. How can I prevent that? I know it's possible to stop this with jQuery's stopPropagation() but where would I call this method?
Here's the JSFiddle with the problem: http://jsfiddle.net/4RZvV/ . To replicate click on the editable values and you'll see that the containing div will catch a click event. This also happens when I click anywhere on the x-editable popup and I'd like to prevent that as well.
EDIT after lightswitch05 answer
I have multiple dynamic DIVs which should be selectable so I couldn't use a global variable. I added an attribute to the .editable-click anchors which get's changed instead.
editable-active is used to know if the popup is open or not
editable-activateable is used instead to know if that .editable-click anchor should be treated like it is
$(document).on('shown', "a.editable-click[editable-activateable]", function(e, reason) {
return $(this).attr("editable-active", true);
});
$(document).on('hidden', "a.editable-click[editable-activateable]", function(e, reason) {
return $(this).removeAttr("editable-active");
});
The check is pretty much like you've described it
$(document).on("click", ".version", function() {
$this = $(this)
// Check that the xeditable popup is not open
if($this.find("a[editable-active]").length === 0) { // means that editable popup is not open so we can do the stuff
// ... do stuff ...
}
})

For the click on the links, simply catch the click event and stop it:
$("a.editable-click").click(function(e){
e.stopPropagation();
});
The clicks within X-editable are a bit trickier. One way is to save a flag on weather the X-editable window is open or not, and only take action if X-editable is closed
var editableActive = false;
$("a.editable-click").on('shown', function(e, reason) {
editableActive = true;
});
$("a.editable-click").on('hidden', function(e, reason) {
editableActive = false;
});
$("div.version").click(function(e) {
var $this;
$this = $(this);
if(editableActive === false){
if ($this.hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
}
});
Fixed Fiddle

It's not pretty, but we solved this problem with something like:
$('.some-class').click(function(event) {
if(event.target.tagName === "A" || event.target.tagName === "INPUT" || event.target.tagName === "BUTTON"){
return;
}
We're still looking for a solution that doesn't require a specific list of tagNames that are okay to click on.

onClickOut (click after leaving the element) [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 years ago.
The problem was that I need a "onClickOut"-Event.
For example:
You have a DIV viewing on hovering (onMouseOver) some Button or what ever.
If you click outside the element it needs to hide, but if you say $("body").click it also will be hidden when you click into the element itself. :/
Now I listen the mouseposition and when mouseleave() I set a var on clicking into my element. In the next step I listen a generelly click-event (body) but I ask if the var was set. If not it has to be a click outside my element, so I can hide my element.
I hope you can use it:
$("#schnellsuche_box").mouseleave(function() {
var inside;
$("#schnellsuche_box").click(function() {
inside = true;
});
$("body").click(function() {
if(!inside) {
$("#schnellsuche_box").hide();
}
});
delete inside;
});

You do that by listening to a click on the document level, and inside the event handler you check if the clicked element was #schnellsuche_box or any element inside #schnellsuche_box by using closest(), like so :
$(document).on('click', function(e) {
if ( ! $(e.target).closest('#schnellsuche_box').length )
$('#schnellsuche_box').hide();
});
FIDDLE

You need to stop the #schnellsuche_box click event from bubbling up to the body click event (that's default event propagation) by doing return false:
$("#schnellsuche_box").click(function() {
inside = true;
return false;
});

Try this:
$("body").click(function(e) {
var $target = $(e.target);
if (!$target.is('#schnellsuche_box') &&
!$target.parents('#schnellsuche_box').length) {
alert('outside');
}
});

$("#schnellsuche_box").on("click",function(event) {
event.preventDefault();
event.stopPropagation();
});

click event of parent triggered [duplicate]

This question already has answers here:
jquery stop child triggering parent event
(7 answers)
Closed 8 years ago.
Problem is solved, i made another stupid mistake in my code... sorry, thanks
example:
<div id="window1Header" class="windowHeader">
Window 1 <a id="min1" class="minimize">[-]</a> <a id="max1" class="maximize">[+]</a>
</div>
<script>
$(function() {
$(".windowHeader").mousedown(function () {
$(this).parent().css({"border" : "#000 1px dashed"});
$(this).parent().draggable({ containment: 'parent' });
});
$(".windowHeader").mouseup(function () {
$(this).parent().css({"border" : "#ccc 1px solid"});
setTimeout(function() {
$(this).parent().draggable('destroy');
}, 100);
});
$('#min1').click(function(e) {
e.stopPropagation();
$("#window1Body").hide().slideUp(500);
});
$('#max1').click(function(e) {
e.stopPropagation();
$("#window1Body").hide().slideDown(500);
});
});
</script>
The outerdiv (window1Header) has a mousedown and up event and the 2 links (min1 and max1) have click-events. But clicking the links wil trigger the event binded to window1Header.
How can i trigger the right events?
I'm using the jquery library btw.
Any help is appreciated!

Generally, use stopPropagation to prevent the event from bubbling to parent elements. E.g.:
$('.minimize').click(function(e) {
e.stopPropagation();
...
});

You need to at least have an href="#" on your a tags otherwise the click event will never fire. Also, return false in the click events.
$('#max1').click(function(e) {
$("#window1Body").hide().slideDown(500);
return false;
});