Develop Reference

.click() on element nested inside of element with .click()

I am trying to create an accordion inside of an accordion... and I am struggling a little.
essentially, I have a div .applicant, which upon click adds a class .expand, which sets the height to auto, but, inside of the .applicant div, I have another div .applicant-child, which SHOULD do the same thing, and does... but, .applicant closes when you click .applicant-child, meaning you have to click the .applicant again to open view the nested element.
Here is my code:
HTML
<div class="row">
<div class="col-sm-12">
<div class="applicant">
<p><b>PS4 Tournaments</b></p>
<div class="applicant-child">
<p>lalal</p>
<p>lalal</p>
</div>
</div>
</div>
</div>
jQuery
$('.applicant').click(function(){
if ($(this).hasClass('expand')) {
$(this).removeClass('expand');
} else {
$( this ).addClass('expand');
}
});
$('.applicant-child').click(function(){
if ($(this).hasClass('expand')) {
$(this).removeClass('expand');
} else {
$( this ).addClass('expand');
}
});
I could simply remove $(this).removeClass('expand'); from .appliant, but we'll be displaying a lot of data, so that isn't ideal.
How do I solve this?
Thanks in advance :)

That's just event bubbling an expected behaviour.
See this link on jQuery on how to disable the click-Event to bubble up the DOM and triggering the event on your parent element.
Basically, you just have to do this:
$('.applicant-child').click(function(event){
event.stopPropagation();
if ($(this).hasClass('expand')) {
$(this).removeClass('expand');
} else {
$( this ).addClass('expand');
}
});

You want to prevent bubbling. Bubbling means, that the event you are reacting to is being passed up the DOM to the parent objects, until it reaches the window.
Check out the "event.stopPropagation()" method, which will prevent any subsequent listeners from reacting.

On your click handler if you pass through a param:
$('.applicant').click(function(event){
console.log(event.target);
if ($(this).hasClass('expand')) {
$(this).removeClass('expand');
} else {
$( this ).addClass('expand');
}
});
you can use event.target to check if you are clicking on the parent or the child and decide on what action to take from there.

How to hide element when click outside area using javascript?

How to hide element when click outside area using javascript ?
http://jsfiddle.net/a3MKG/35/
I try like this but not work
<script>
function showDiv(id) {
$("#div1").toggle();
$(document).click(function() {
$('#div1').fadeOut(300);
});
}
</script>

You can use a click handler to the document object where if the click has not originated from the div or button hide the div
$(document).click(function(e){
if(!$(e.target).closest('#div1, input[name="Showdiv1"]').length){
$('#div1').hide()
}
})
Demo: Fiddle

block parent jquery functions when calling child function

I have a problem with conflicting parent/child jquery functions. The child function is a bootstrap function, the parent is a custom function. The idea is that the parent div (see code below) can contain too much data, and thus should be limited in height. there is a toggle when you click in the div, to expand it, but that should not happen when i click on a child element, because this one also collapses down.
<div id="items" class="semiCollapsed">
<span data-toggle="collapse" data-target="#x" > an item</span>
<div id="x" class="collapse">description of item</div>
... more items ...
</div>
The function for my parrent JQuery is:
jQuery(document).ready(function() {
jQuery('#items').click(function(event) {
event.preventDefault();
$("#items").toggleClass("semiCollapsed");
})
});
and the css:
.semiCollapsed {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height:110px;
}
Bootstrap Collapse:
http://pastebin.com/Xfnq7R4i
The problem I'm having is that the parent get called when i call the child function. How to fix this?
JSFiddle:
http://jsfiddle.net/7fdjL3qx/

If clicked item is not target we must return. if (event.target !== this) return;
jQuery('#items').on('click', function (event) {
if (event.target !== this) return;
event.preventDefault();
$(this).toggleClass("semiCollapsed");
});
Fiddle: http://jsfiddle.net/abhiklpm/7fdjL3qx/1/

use event.stopPropagation(); instead of event.preventDefault();.
Because events happening on child bubbles up to the parents so all the events bound on parents also gets executed.
So to stop the event to bubble up to the parent you need to have event.stopPropagation() on child click events.

You can use check event.target.id inside click element and if it is items then only toggle class.
jQuery(document).ready(function() {
jQuery('#items').click(function(event) {
event.preventDefault();
if(event.target.id=="items")
{
//use this for clicked element instead of finding it again using id
$(this).toggleClass("semiCollapsed");
}
});
});

add/remove active class on parent element when clicked

I'm having some issues with my javascript - trying to get this to work.
To begin with, here is what I am wanting this to do:
1.) Add/Remove 'active' class to parent element on click
2.) When on child element, any clicking inside child element makes it close - Need help to make it NOT do that...if any clicking is going on inside the child element, it needs to stay open and not close up...
3.) Besides clicking on the parent element to open/close the child element, is there a way to allow clicking anywhere on the page to close the child element rather than only clicking on the parent element to close the child element up?
JS:
$(document).ready(function () {
$("#logsterIn_profile").click(function () {
$(".logsterIn_profile").slideToggle('200');
$("#logsterIn_profile").addClass('active');
});
});
To see what i currently have in action, FIDDLE ME DEMO
Any help would be much appreciated!

Here's the answer to all three points:
http://jsfiddle.net/vnny7/
$(document).ready(function () {
$("html").click(function () {
$(".logsterIn_profile").slideToggle('200');
$("#logsterIn_profile").toggleClass('active');
});
$(".logsterIn_profile").click(function( event ) {
event.stopPropagation();
});
});
use toggleClass to go between "active" and ""
use stopPropagation on the child element to put the click event on it, and stop it from "propagating" the event up to its parent
to get a click anywhere on the page to open/close the child, just have the click event tied to "html"

Do you want the div to open AND close when the user clicks outside the parent div, or just close?
By your description, you sound like you only want the div to close, but not open if the user clicks outside. If that's the case, you need to check if the child is open or closed when the user clicks outside of the parent, as follows:
$(document).ready(function () {
$("html").click(function(e) {
if (e.target == document.getElementById("logsterIn_profile")){
$(".logsterIn_profile").slideToggle('200');
$("#logsterIn_profile").toggleClass('active');
}else{
if($("#logsterIn_profile").hasClass('active')){
$(".logsterIn_profile").slideToggle('200');
$("#logsterIn_profile").toggleClass('active');
}
}
});
$(".logsterIn_profile").click(function( event ) {
event.stopPropagation();
});
});
You can check it out at this fiddle

http://jsfiddle.net/AzSXL/8/
$(document).ready(function () {
$("#logsterIn_profile").click(function () {
$("#logsterIn_profile").toggleClass('active');
$(".logsterIn_profile").slideToggle('200');
});
$(".logsterIn_profile").bind('click',function(e) {
e.stopPropagation();
});
$("html").click(function () {
$("#logsterIn_profile").toggleClass('active');
$(".logsterIn_profile").slideToggle('200');
}
});

JQuery selectors: Apply rule to element when certain child is NOT clicked

So I have a parent div with different elements inside. Right now I have it set up so when that parent div is clicked, it applies a "selected" css attribute (just highlights it). However, there is an anchor tag inside this div and I don't want the div to highlight if the anchor is clicked.
My code to highlight the div
$(document).on("click",".playlist-row",function() {
var selected = $(this);
highlight(selected);
});
Ideally, I want it to behave like this: (just pseudo code)
$(document).on("click",".playlist-row",function() {
var selected = $(this);
if ($(".childElement) is not the part clicked) {
selectSongInPlaylist(selected);
}
});
Any elegant ways to get something like this to work?

You could use stopPropogation() as in http://api.jquery.com/event.stopPropagation/ on the child elements like $('.childElement').click(function(e){
e.stopPropagation();
}); to prevent the click event propagating to the parent element. You could also check the event.target property as described here http://api.jquery.com/event.target/

you need to prevent the click event bubbling up to the container
capture the event and use event.stopPropagation
$(document).on('click', "a", function(event){
event.stopPropagation();
});

I will assume that I understood your question, so here's what I would probably do:
$(document).on("click", ".playlist-row", function(e) {
if (!$(e.currentTarget).is("a")) {
selectSongInPlaylist($(this));
}
}