We Keep Coding

Link within a link onClick event - Avoid both click events triggering

I have a link within a link, both with an onClick event.
The outer link works as desired. However, the inner link triggers both onClick events. I would like it so that the outer event is not triggered when the inner link is clicked.
<div onClick="console.log(1)">
Inner
</div>
JSFiddle

Javascript events will propagate up through the tree.
So when you click on the inner anchor it will also emit any click events for elements higher up, so the div element.
To stop this the inner click handler has to prevent the event from propagating with e.stopPropagation();.
However this gets a little messy when you don't register handlers with .addEventListener() in JavaScript.
If you add events this way you can do it like this (first give your anchor an id, say inner) which is nice and easy:
document.getElementById('inner').addEventListener('click', function (e) {
e.stopPropagation();
console.log(2);
});
You can however pass the event into your click handler if you do wish to use the attribute, so:
Inner
//JS
function innerHandler(e) {
e.stopPropagation();
console.log(2);
}
Generally speaking (this is my opinion) i would avoid the latter. Events registered like this are difficult to remove and modify. You can't also easily register multiple handlers to the same element for the same event.
stopPropagation docs

Need to get info from any element, which was clicked, but not from parent elements

Need to get info from any element, which was clicked.
Example:
<div>text1<section>text2</section></div>
and JS
$(function(){
$('body *').click(function(){
alert($(this).get(0).tagName.toLowerCase());
});
});
If I click text2, parent element throw alert too. I need only first alert from section. How I can block next alerts from all parent elements of section.

Use event.stopPropagation() to prevent the event from firing on the containing elements.
$(function(){
$('body *').click(function(e){
e.stopPropagation();
alert($(this).get(0).tagName.toLowerCase());
});
});

Just wanted to expand on Kooilnc answer - Using on with event delegation is another option.
Event delegation would be nice if you have an event listener bound before or after on a node that needs to listen to a click handler that has bubbled up. If you stopPropagation, this obviously would be an issue.
Here's a fiddle with a demo:
http://jsfiddle.net/ahgtLjbn/
Let's say a buddy of yours has bound an event listener to a node higher up in the DOM tree. He expects any events that bubble up to it, to be handled by his script.
Using event delegation, the event still bubbles up (so your buddies code will still fire), but it will only alert once (since we called e.stopPropagation).
Calling on without event delegation, or binding the event directly using click (which, under the hood, is just calling on) will prevent the event from bubbling, so your buddies code will never run.

Why document click listener triggers immediately?

I want to bind a click function to the document when open some menu via click.
The problem is that when trigger the first event 'click on the menu', the function attached to the document has been triggered by the same event and close the menu. How to solve that issue. My code is something like that:
$('#openMenu').bind('click touchend', function(e){
e.preventDefault();
$('.openMobMenu').removeClass('openMobMenu');//Close All elements
var _this=$('#headMenu')
_this.addClass('openMobMenu');
$(document).bind('click touchend',{elem:_this},hideElementMob);
});
// bind click event listner to the document
function hideElementMob(e){
var th=e.data.elem;//Get the open element
var target=$(e.target);//Get the clicked target
//Check the target and close the element if need
if(target.parents('.openMobMenu').length==0) {
th.removeClass('openMobMenu');//close the element if need
//Unbind listner after closing the element
$(document).unbind('click touchend');
}
}
Thank you in advance!

Try adding the close handler with a little delay:
setTimeout(function(){
$(document).bind('click touchend',{elem:_this},hideElementMob);
}, 10);
And as Jan Dvorak suggested, you should use .on() to attach events.
UPDATE
I realized I did not answer the whole question, so here is some improvement to the "why does it behave like this" part:
When the click event occurs on #openMenu, the associated handler is executed first. This binds a click event to the document body itself.
After this, the event gets bubbled, so the parents of the #openMenu also recieves a click event, and since document.body is a parent of the #openMenu, it also recieves a click event and closes the popup immediatley.
To cancel the event bubbling, you can also call e.stopPropagation(); anywhere in your event handler. (maybe its a cleaner solution compared to setTimeout)

The added class doesn't trigger its jQuery function

It's an audio player: the idea is that the play button turns into a pause button (and viceversa) when clicked.
Thing is that the .pause event doesn't trigger the following function:
$('.pause').click(function(){
player.pause();
$(this).addClass('play');
$(this).removeClass('pause');
});
The css shows that the pause class is set, but the function doesn't work. Is there a way to make it work? (would be great to know why it didn't work)
jsFiddle

Use a delegated event binding to bind a handler that will be selector-aware without requiring rebinding on events.
For the purposes of your demo, the selector would be along the lines of:
$('.player_controls').on('click', '.pause', function () {...});
Delegate event bindings attach the listener to a parent element that checks to see if the event fired was fired on an element that matches the provided selector.
jQuery docs
When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

You can use event delegation for this. The issue is that binding directly (without delegation) binds to whichever elements exist at the time click is called.
$(".player_controls").on("click", ".pause", function(){
/* ... */
});

Instead of using $('.pause').click(function(){...}) you would need to start using the $.on method to start listening for objects which are still not in the DOM.
e.g
$(".pause").parent().on("click",".pause", function(event){
player.pause();
$(this).addClass('play');
$(this).removeClass('pause');
});

An object binded with .click(function() {...}); has no effect on click

I'm trying to bind to a span element a function to scroll a slideshow (specifically rcarousel plugin).
that's the javascript code:
$('.forward').click(function() {
$("#carousel").rcarousel("next");
});
$('.rewind').click(function() {
$("#carousel").rcarousel("goToPage", 0);
});
Now, this code is inside a document.ready function, the forward button $(".forward") works and successfully scrolls the slideshow, but it's like the rewind button being totally ignored by the browser. With no errors thrown by the chrome devtools console; and if I paste the same code in the console .rewind starts magically to work.
Anyone knows what kind of sorcery is going on there?
PS: In the same document.ready function there are other bindings, each working flawlessly

The carousel buttons are changed dynamically by the carousel, so you need to use a delegated event handler, attached to a non-changing ancestor (document is the default of nothing closer is handy):
$(document).on('click', '.forward', function() {
$("#carousel").rcarousel("next");
});
$(document).on('click', '.rewind', function() {
$("#carousel").rcarousel("goToPage", 0);
});
Delegated events work by listening for the event to bubble up to a non-changing ancestor, then applying the jQuery selector, then applying the function to any clicked elements that caused the event. This means that the element only need to match at event time, not *event registration time).
Note: Do not connect delegated event handlers to 'body' as styling can cause body to have a zero height and not respond to bubbled mouse events.