Develop Reference

Open JS menu on first click, on 2nd click go to URL

Im trying to create a dropdown menu that when first click, shows the children elements, if you click on a child you go to the childs url and if you click the country name again the child menu collapses.
I've got it working to an extent on I can't get the children to link through to their respective links.
Im guessing its to do with my e.preventDefault ?
JS
$('.sub-lang').on('click', function(e){
if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) {
$(this).removeClass('active');
$(this).css('height', 'auto');
$(this).children('ul').hide();
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65 );
$(this).children('ul').show();
}
e.preventDefault();
});
demo

just add javascript:void(0); inside the href attribute of your languages.
English
And remove the preventDefault:
$('.sub-lang').on('click', function(e){
if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) {
$(this).removeClass('active');
$(this).css('height', 'auto');
$(this).children('ul').hide();
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65 );
$(this).children('ul').show();
}
});
the fiddle: http://jsfiddle.net/k4gz3e0s/4/

The problem is that the click event is being propagated up the ancestors as the items are nested under the click target (the .sub-lang element). The e.preventdefault() therefore stops all link clicks anywhere inside that element from performing their default behaviour.
You could just check that the target is the sub-link and conditionally return true or false to allow default behaviour:
return !$(e.target).parent().hasClass('active');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/k4gz3e0s/5/

How to avoid events on elements behind others in HTML and JavaScript/jQuery

I have a table with some div's inside it.
I want an event to happen when I click on a td element, but I also want an event to happen when I click on a div element.
As you can see in this fiddle http://jsfiddle.net/rkGkp/1/ my problem is, when I click on the div element, both the div and td event is triggered, but I only want the div's event to be triggered.
I use these event listeners
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function() {
alert("a td is clicked");
});
});
What can I do to avoid the element behind my div to trigger an event?

Have a look here: FIDDLE
I used stopPropagation()
CODE
$("#div").on("click", function(event) {
event.stopPropagation();
alert("a div is clicked");
});

This is the easiest way to achieve what you need. Simply check if the click target is on the div:
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function(e) {
if(!$(e.target).is("#div")){
alert("a td is clicked");
}
});
});

Check if it clicked when other element is clicked

Lets say I have divB inside divA. I have a click event on divA.
But how to check if divB inside divA is also clicked?
jsFiddle - http://jsfiddle.net/zwxK6/
The Script -
$('#divA').on('click', function() {
//What to do here? how to check if divB inside divA is clicked also?
});​

Try this:
$('#divA').on('click', function() {
alert('divA is clicked');
});
$('#divB').on('click', function(e) {
e.stopPropagation();
alert('divB is clicked');
});
DEMO HERE

Use event object to get the source of event, pass event object to function you are binding for click, event.target will give you source of event.
Live Demo
$('#divA').on('click', function(event) {
alert(event.target.id);
//Use event.target.id to check if divB inside divA is clicked also
});​

This will click the divA and then divB get clicked too.
You can find like this: http://jsfiddle.net/zwxK6/4/
function fireIt(id) {
alert(id + " is clicked too.");
}
$(function() {
$('#divA').on('click', function(e) {
$(e.target.id).children('div').click(
fireIt($(e.target).children('div').attr('id'))
);
});
});

in body click div hide, when i click on div also it hide

I want to show a div on link click and hide if click outside the link or div.
login
<div class="login-panel">
<input type="text" id="LoginForm_username" name="LoginForm[username]" class="field" value="username">
<input type="password" id="LoginForm_password" name="LoginForm[password]" class="field" value="password">
<input type="submit" value="Login" class="loginBtn">
</div>
initially div is hidden. and script is
$(document).ready(function() {
$("#login").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function(e){
if(e.target.className == "login" || e.target.className == "login-panel") {
//alert("do't hide");
}
else {
$(".login-panel").hide();
}
});
});
when I click on link div shows and overlaps some other elements, and when I click outside the body it dies.
But the problem is when I click on input box to enter username login-panel div get hides.
why div hide?
any guidance will be appreciated.

http://jsfiddle.net/thirtydot/F4p2x/15/
$(document).ready(function() {
$("#login").click(function(e) {
$(".login-panel").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('.login-panel, .login-panel *')) {
$(".login-panel").hide();
}
});
});

You should do it like this:
http://jsfiddle.net/VWENB/1/
$("#login").click(function(e) {
$("div.login-panel").toggle();
e.stopPropagation();
});
$("body").click(function(e) {
if (e.target.className == "field") {
//alert("do't hide");
} else {
$(".login-panel").hide();
}
});​

When you are clicking on a sub-element, your condition (e.target.className) is not applied to your parent element (<div class="login-panel">). But you can use the closest function of jQuery (see here) in order to test if you are in your parent element :
if(e.target.className == "login" || $(e.target).closest(".login-panel").length === 1) {
...
}

PROBLEM is when i click on input box to enter username login-panel div
get hides. why div hide?
Because, you clicked the body too, when clicking in the div. Then both events are triggered. Check out event.stopPropagation() which you may use in the else part of body.onclick.

That because your input lies inside #login div, so if you click inside this div it will hide. So you can use jquery :not selector to specify those excluded elements
$(document).ready(function () {
$("#login,:not('#LoginForm_username'),:not('#LoginForm_password')").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function (e) {
if (e.target.className == "login" || e.target.className == "login-panel") {
//alert("do't hide");
} else {
$(".login-panel").hide();
}
});
});​
DEMO

Here you go:
$(document).ready(function () {
$("#login").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function (e) {
if (e.target.nodeName != "INPUT" && e.target.className!= "login" && e.target.className!= "login-panel") {
$(".login-panel").hide();
}
});
});​
You were using the wrong selector in your if to check if a click on the body wasn't targeting a input element.
Fiddle

Just find mouse when the click event occur,
<script type="text/javascript">
find_mouse = false;
$(document).ready(function()
{
$('.login-panel').hover(function(){
find_mouse=true; // if mouse on login-panel
}, function(){
find_mouse=false; // not on login panel
});
$("body").click(function(){
if(! find_mouse) // if not on login panel
$('.login-panel').hide();
});
});
</script>

As the other saying clicking input cause event triggering in the body so you should check if the sender is child of the login I think below code do the trick;
$("body").click(function (e) {
var $sender = $(e.target);
if ($sender.closest(".login-panel").length) {
return ;
}
$(".login-panel").hide();
});
Edit : update the condition with closest as it is correct function.
Begins with the current element, Travels up the DOM tree until it finds a match for the supplied selector. The returned jQuery object contains zero or one element for each element in the original set.

click elsewhere

i have problem with click event. click to another element with event(click), doesn't count like click elsewhere. I want active one element or none.
demo: http://jsfiddle.net/WP4RH/
code:
$('span').click(function(){
var $this = $(this);
if($this.hasClass('active')){
$this.removeClass('active')}
else $this.addClass('active');
$('div').click(function(){
if (!$this.has(this).length) {
$this.removeClass('active');
}
});
return false;
});

Add this at the beginning of your span event handler:
$('.active').removeClass('active');
Demo
This is assuming that you want multiple clicks on the same span to retain active. If you don't want that, then let me know and I can modify the code.
​

For starters, You should move the div handler outside and then removeClass based on div element.
$('span').click(function(e) {
e.stopPropagation();
$(this).parent().find('span').removeClass('active');
$(this).toggleClass('active');
});
$('div').click(function() {
$(this).find('span').removeClass('active');
});
DEMO: http://jsfiddle.net/WP4RH/1/

Don't bind a click handler inside a click handler, just check if the target is the div or the span inside the click handler instead. Also, when adding the active class to this, just remove it on any sibling span :
$('span').on('click', function(){
$(this).toggleClass('active').siblings('span').removeClass('active');
});
$('div').on('click', function(e){
if (e.target == this) $('span').removeClass('active');
});
FIDDLE
​

If you want to keep the toggle-off functionality when the span itself has been clicked, then you can use the following. Also, note that you're binding an event handler each time a span is clicked.
http://jsfiddle.net/WP4RH/7/
$("span").click(function() {
$(this).siblings("span").removeClass("active"); // remove from other spans
$(this).toggleClass("active"); // toggle this span
return false;
});
​
$("div").click(function() {
$(this).find("span").removeClass("active"); // remove from all spans
});