We Keep Coding

Element on element gets clicked both by Javascript

I've got a div which has multiple elements nested. If I press on the div, the buttons appear in the same DIV. If I press on the button however, the buttons dissapear as well (this is because of a toggleClass on the div)
I've tried returning but that isn't working as well. See below for a JSFiddle
http://jsfiddle.net/p168uLv2/
$(document).on('click', "[data-link=level1]", function() {
console.log("li clicked");
$(this).find(".knoppenbalk").toggleClass("displaynone");
});
$(document).on('click', "[data-link=solo]", function() {
console.log("solo BUTTON clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-link="level1" class="limodeknop">
<div class="overlay"></div>
<div class="modeknop">
<div class="titel">
<lrmodenaam>Level 1</lrmodenaam>
<lrsubmode>Tutorial</lrsubmode>
</div>
<div class="knoppenbalk displaynone">
<div data-link="solo" class="solo btn">Solo</div>
</div>
</div>
</div>
This is made with jQuery, and I'm working with Framework7, but I don't think thats an issue.

You should stop the propagation of the events (calling bubbling). You can search tons of articles about it.
http://jsfiddle.net/p168uLv2/1/
$(document).on('click',"[data-link=solo]", function(e){
console.log("solo BUTTON clicked");
e.stopPropagation();
});
This only apply to the child element, to avoid the parent click propagation.

You can stop an event propagating to parent elements with use of:
event.stopPropagation();
You will want to accept event as an argument to your inline functions.

$(document).on('click',"[data-link=solo]", function(e){
e.stopImmediatePropagation();
console.log("solo BUTTON clicked");
})
;

Prevent parent event fire on jQuery

I have very annoying problem in my code.
When I change a checkbox state, the click event of it parent fires as well.
I've tried different methods to solve this problem like:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
return false
Unfortunately no one works for be (probably it's not related to "event propagation" issue). How can I make ('.sortable').click not to be fired on checkbox change?
HTML
<div class="sortable">
<span>Hello all!</span><br />
<label>Click on me<input type="checkbox" checked="checked" /></label>
</div>
jQuery
$(function(){
$('.sortable input[type=checkbox]').change(function(event){
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
alert('checkbox changed');
});
$('.sortable').click(function(){
alert('sortable clicked');
});
});
You can find the code on: Demo

As you have bind click event to parent div, it is firing that also. You can check the 'target element if not checkbox' condition in parent click event handle like below
$('.sortable').click(function(event){
if(event.target.type!="checkbox")
console.log('sortable clicked');
});
Demo

coz You're Stopping propagation of .change() event and handling .click() event
Just Try changing:
$('.sortable input[type=checkbox]').change(function(event){ ... });
to:
$('.sortable input[type=checkbox]').click(function(event){ ... });
Hope it helps!
Here is a working example: http://fiddle.jshell.net/vjKGv/

I have done some research on jsfiddle
$(function(){
$('.sortable').click(function(e){
e.preventDefault();
console.log('sortable clicked');
});
$('.sortable input[type=checkbox]').click(function(event){
//event.stopImmediatePropagation();
event.stopPropagation();
//event.preventDefault();
console.log('checkbox changed');
});
});

Exclude a checkbox from .click() of a div

I'm tryin to make a div 'active' by clicking on it using jquery. But inside the div, there is a checkbox. I want the div to become active whenever i click anywher inside the div except the checkbox. I have done that, but the checkbox is now not responsding to click events (ie it's not getting checked/unchecked when i click on it).
http://jsfiddle.net/U7VmV/3/
$(document).ready(function(){
$('.c-video').click(function(){
$('.c-video').removeClass('active');
$(this).addClass('active');
});
}).children().find('label').click(function(e){
return false;
});

Use event.stoppropagation()
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
}).find('label').click(function (e) {
e.stopPropagation();
});
Fiddle Demo

You have to prevent the propagation of the event, when you return false it prevents the event propagation but it will also prevents the default action of the click event that is checking/unchecking the checkbox.
So instead or returning false call stopPropagation() in the event object
$(document).ready(function(){
$('.c-video').click(function(){
$('.c-video').removeClass('active');
$(this).addClass('active');
});
}).children().find('label').click(function(e){
e.stopPropagation()
});
Demo: Fiddle

Another way to do it is to check clicked event target:
var $cVideo = $('.c-video').on('click', function(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'LABEL') {
$cVideo.removeClass('active');
$(this).addClass('active');
}
});
http://jsfiddle.net/U7VmV/4/

jQuery hide if clicked outside the button

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);
}

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.