We Keep Coding

jQuery - how to handle clickable elements, that haven't loaded yet

I have a toolbar that is injected into a template on click. The toolbar also consists of a dropdown, which gets hidden if the user clicks outside the dropdown. To track a click outside the dropdown, I use "$(document).click(function()..." The problem is that the dropdown does not exist on document.ready , what could be improved?
JS
$(document).click(function(){
$('.dropdown').hide();
});
$('.dropdown_name').click(function(){
e.stopPropagation();
$('.dropdown').show();
});

Look for a parent element of the element you want to the click that already exists on the DOM, then use .on on it. Basically what it does is listen for clicks for the descendants, regardless if they're there or not.
$('PARENT_ELEMENT_SELECTOR').on('click','DESCENDANT_SELECTOR',function(e){
//do what you want here
});

You can use the on method on the document like this
$(document).on( "click", ".dropdown_name", function(e) {
e.stopPropagation();
$('.dropdown').show();
});

You could do something like this:
var dropdown = false;
$('.dropdown_name').click(function(){
e.stopPropagation();
$('.dropdown').show();
dropdown = true; // dropdown is now visible
$(document).click(function(){
if(dropdown == true)
$('.dropdown').hide();
dropdown = false; // dropdown is invisible
});
});

Click event when not clicking on an element

Maybe I'm, just tired but I have a right click menu that I want to close when the user clicks anywhere else than the menu. But I cant figure out how to make it disappear when the user clicks on something else.
Here is the code for showing the menu:
// If mouse click on was pressed
$('#content_list table tr').bind('mouseup', function(event) {
// if right click
if(event.which == 3) {
showRightClickMenu(event);
}
event.preventDefault();
event.stopPropagation();
});
And this is what I got for hiding the menu
// If mouse click outside document
$(document).bind('blur', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
// If mouse click not on the menu
$('*:not(#rightClickMenu *)').bind('mousedown keydown', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
The first bind checks if the user clicks outside the document and the second bind checks if the user clicks on everything except the menu.
But the second one doesn't really work. If I click on the menu the menu is hidden.
Shouldn't be so hard imo... Anyone got any ideas?

Try it this way
$(document.body).bind('click', function() {
hideRightClickMenu();
});
$(window).bind('blur', function() {
hideRightClickMenu();
});

Try with focusout() event and using on() instead of old bind(). This will work even with multiple submenus.
http://jsfiddle.net/elclanrs/jhaF3/1/
// Something like this...
$('#menu li').on('click', function() {
$(this).find('ul').show();
}).find('ul').on('focusout', function(){
$(this).hide();
});

Disable click if class ="X", jQuery

Im trying to build a tabbed content box, and im wondering if its possible that i can disable 1 link with a specific class, such as 'disabled'
I read somewhere about a function called preventDefault, would this work?
http://jsfiddle.net/Ssr5W/

You can disable click event by returning false. like,
$('#tabmenu a').click(function() {
return !$(this).hasClass('disabled');
});
Also, I've updated your fiddle: http://jsfiddle.net/Ssr5W/1/
EDITED
and of course, preventDefault would work :)
$('#tabmenu a').click(function(e) {
if($(this).hasClass('disabled'))
e.preventDefault();
});
fiddle: http://jsfiddle.net/Ssr5W/2/

$('.disabled').click(function(e) {
e.preventDefault() ;
}) ;

You can just check for the class on the element that was clicked on:
$('tabElement').click(function(){
if(this.hasClass('disabled'))
return;
//Your code here..
);
This won't interfere with other clikc-handlers you may have on your tab element

How to hide a table when it blur/or click document that outside the table

How to hide a table when it blur/or click document that outside the table

If you're asking how to hide the table when the user clicks elsewhere in the document (your wording is a little off), then may I suggest the clickoutside special event from Ben Alman?
Usage:
$('table').bind("clickoutside", function(event){
$(this).hide();
});
Or, if that seems a bit OTT, then try this (no plugins required):
var myTable = $('table');
$(document).click(function(e) {
if (e.target !== myTable[0] && !$.contains(myTable[0], e.target)) {
myTable.hide();
}
});

You can use event bubbling to your advantage here, like this:
$("#tableID").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$("#tableID").hide();
});
With event.stopPropagation() we stop the bubble from reaching document when it comes from within the table. When it comes from elsewhere it (by default) gets to document, hiding the table. In "by default", I mean you haven't done areturn false or .stopPropagation() on those click events.

Table have not blur, but elements inner table have:
$('#yourtableid:visible a').each(function(){
$(this).bind('blur', function(){
$('#yourtableid:visible').hide();
});
});
$(document).bind('click', function(){
$('#yourtableid:visible').hide();
});
This is jast idea, not solution

how to make the menu close if it is clicked out

i have an menu with some values and i got someting hidden and while click on more button it shows like google more menu... if it is clicked out it is not hiding till the more menu is clicked once again
More<small>▼</small><div class="more list" id="one" style="display:none">test <span style="color:#329">|</span> test1 <span style="color:#169">|</span> test4</div></div>
Script:
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}
how to make it close while the mosuse clicks on any other place other than the menus

Try using the onblur event.

I see you've tagged this with jQuery, if that is an option, you can clear up the link a bit, like this:
More<small>▼</small>
And use unobtrusive script combined with event bubbling to your advantage, like this:
$(function() {
$(".more_link").click(function(e) {
$(this).next(".more").toggle();
e.stopPropagation();
});​​
$(".more").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$(".more").hide();
});​
});
You can test it out here, this only closes the menu if you clicked neither the menu of the toggle, e.g. clicking one of the test links will not close it. If you want it to, just remove the $(".more").click(function(e) { e.stopPropagation(); }); portion.
It uses event.stopPropagation() to stop the click from bubbling up to document, which if happens (and would if you clicked anything else) triggers its click handler, closing all the .more elements.

I wouldn't use onBlur because it's not a good accessibility approach (for example if the user is using tab to navigate the page).
Look at this solution instead:
jQuery click event for document but ignore a div

Typically, I let the event bubble up to the 'body' or 'html' doc and check if the target is what i want (and/or isn't contained within what i want). If the event target is not contained within your menu, then perform your desired operation (in this case, hide the div).
i.e.
jQuery(document).ready(function(){
jQuery("html").bind("click", function(evt){
var $target = jQuery(evt.target);
var shouldShowMenu = $target.hasClass("menu_toggle");
shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
if(!shouldShowMenu)jQuery(".more_list").hide();
});
});
NOTE: your markup would needs to be extended such that the "more" href becomes has a class attribute, class="menu_toggle"