We Keep Coding

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.

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

jQuery click events overriding each other

I have the following jQuery:
$('.io-sidebar-section').click(function () {
console.log('Section Clicked');
$(this).next().fadeToggle('fast',function(){});
});
$('.io-sidebar-section-advanced-toggle').click(function(){
$(this).parent().next().children('.io-sidebar-link-advanced').fadeToggle('fast',function(){});
});
the advanced toggle is inside of a sidebar section. When I click on the advanced toggle, it executes the sidebar section click.
How can I seperate these two out?

You can use the stopPropagation method of the event object inside the click event handler for the child element:
$('.io-sidebar-section-advanced-toggle').click(function(e){
e.stopPropagation();
$(this).parent().next().children('.io-sidebar-link-advanced').fadeToggle('fast',function(){});
});
From the jQuery docs, here's what stopPropagation does:
Prevents the event from bubbling up the DOM tree, preventing any
parent handlers from being notified of the event.
As mentioned in the comments, if you prefer you can alternatively use return false in the event handler (in this particular case, as far as I can tell anyway - it will also cause preventDefault which may not be what you want to happen). My personal preference is to use stopPropagation but it's completely up to you.

You can avoid events bubbling up by using jQuery's bind function and preventBubble argument.
http://api.jquery.com/bind/

event.stopPropagation stops propagation of live events, although it should not

The documentation for says that event.stopPropagation shouldn't stop propagation of live events (http://api.jquery.com/event.stopPropagation). However it works just the opposite for me. Try this: http://jsfiddle.net/PSYg8. Clicking on the red Div should fire the live event attached to the html element.

What the documentation is telling you is that it is not possible to call stopPropagation from a live handler.
Because jQuery implements live events by listening to all events that propagate up to the <html> element and then seeing if the firing element matches your original selector, stopping propagation from a regular event handler on an element prevents the event from ever reaching the live handler.
Edit: If you're not clear on how DOM events and event propagation works, QuirksMode has a wonderful analysis of the capturing and bubbling models, and Microsoft has a great page that lets you visualize how event propagation works in the W3C, classic, and IE models.

You're swapping the items. Inside .live, you cannot use stopPropagation. So for example this does generate two alerts: http://jsfiddle.net/PSYg8/1/.
$(document).ready(function(){
$('html').live('click', function(){
alert('html');
event.stopPropagation();
});
$('div').click(function(event){
alert('div');
});
});
Inside .click (.bind), stopPropagation works seamlessly. It just stops the div event from bubbling up to the html element.

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events
Meaning
$('html').live('click', function(e){
e.stopPropagation(); // does nothing
alert('html');
});
You misinterpreted the documentation. When you stop propagation on the click event it does not bubble upto the live event.

What does bind and unbind mean in jquery?

What does bind and unbind mean in jquery in idiot slow learner terms?

Binding: coupling an handler to an element(s), that will run when an event occurs on said element(s). Depending on what kind of event you want to handle you'd use different functions like click(function) (alt: bind('click', function) or focus(function) (alt: bind('focus', function).
Unbinding: de-coupling of an handler from an element(s), so that when an event occurs the handler function will no longer run. Unbinding is always the same; unbind('click', function) to unbind a certain handler, unbind('click') to unbind ALL click handlers, and unbind() to unbind ALL handlers. You can substitute click for other types of events of course.

In simple terms: for binding and unbinding event handlers to elements.
$("#divElement").bind('click', functionName);
binds a click event handler to the element with id divElement
$("#divElement").unbind('click', functionName);
unbinds a click event handler to the element with id divElement
Edit:
Bind also allows you to bind a handler to one or more events.
$("#divElement").bind("click dblclick mouseout", function(){ // your code });
Update:
As of jQuery 1.7, the .on() and .off() methods are preferred to attach and remove event handlers on elements.

In three sentences:
An event is a signal that is visible in your program - a key press, for example.
A handler is a function that is geared towards reacting to a certain event.
Binding associates a handler with an event, unbinding does the opposite.

Bind attaches a piece of code to be run to a given HTML element (which is run on the supplied event). unbind removes it.