We Keep Coding

My jQuery will not activate

My jQuery will not activate on click as it should. I am targeting all class a divs
http://jsfiddle.net/clarinetking/BbSMW/6/ (JSFiddle)
$(document).ready(function () {
$(".a").click(function () {
$(this).fadeOut(default:400);
});
});

Your fiddle does not have jQuery in it and you forgot quotes:
$(document).ready(function(){
$('div').mouseover(function(){
$(this).fadeOut('slow');
});
});
New fiddle: http://jsfiddle.net/qwertynl/KMjG6/

Run javascript on btn but not container

I've got this:
http://jsfiddle.net/G3VjC/
which is simply:
$(document).ready(function() {
$(document).on('click','#btn',function(){
console.log('ran btn');
});
$(document).on('click','#containerdiv',function(){
console.log('ran div');
});
});
But when clicking the button is run the btn JS and the container JS (see console log).
How can I separate them?
thanks

use stopPropagation()
$(document).on('click','.meee',function(e){ // add event as argument
console.log('ran btn');
e.stopPropagation()
});

Try this
$(document).ready(function() {
$(document).on('click','#containerdiv',function(){
console.log('ran div');
});
$(document).on('click','.meee',function(){
console.log('ran btn');
return false;
});
});
Demo

Or try this:
$(document).ready(function() {
$('#containerdiv').click(function(){
console.log('ran div');
});
$('.meee').click(function(e){
e.stopPropagation();
console.log('ran btn');
});
});
As chumkiu already said, just use stopPropagation()

$(document).on('click','#btn',function(e){
e.stoppropagation();
var target = $(e.target);
if(!target.attr('id') == 'btn'){
e.preventDefault();
$(target.find("#btn)).trigger("click")
}
//any additional logic if the target was of the intended type.
});

List Checkbox change event not fire in jquery

List Checkbox change event not fire in jquery.
List Creation:
$("#my_list").append("<li><input type='checkbox' class='my_list_checkbox' value='"+id+"' name='"+name+"'/><img class=\""+icon_class+"\" /><label style='padding-left:25px'>"+name+"</label></li>");
I tried following events,but no one works,how solve this issue?
$(".my_list_checkbox").on("change",function(){
console.log("clicked");
});
$(".my_list_checkbox").click(function(){
console.log("clicked");
});
$("#my_list .my_list_checkbox").on("change",function(){
console.log("clicked");
});
$("#my_list .my_list_checkbox").click(function(){
console.log("clicked");
});
$("#my_list li").delegate("input[type:checkbox]","change",function(){
console.log("clicked");
});
$("#my_list > li > input[type=checkbox]").change(function(){
console.log("clicked");
});

it should be
$("#my_list").on('change', "input[type=checkbox]",function(){
console.log("clicked");
});
or
$("#my_list").on('change', ".my_list_checkbox",function(){
console.log("clicked");
});

Try this:
$('.my_list_checkbox').change(function(){
console.log("clicked");
});
If you wish to go through the parent element, try
$('#my_list").find('.my_list_checkbox').change(function(){
console.log("clicked");
});
In this scenario you can also try using .focusout() function if .change isn't working your way...

Use event delegation, As #my_list is parent of .my_list_checkbox and when ever element with class .my_list_checkbox is added to #my_list event is binding automatically.
$("#my_list").on("change", ".my_list_checkbox" ,function(){
console.log("clicked");
});

Try this
$("#my_list .my_list_checkbox").click(function(){
console.log("clicked");
});
or
$("#my_list").on('click', ".my_list_checkbox",function(){
console.log("clicked");
});

How do I hide a element using jquery on click and when a user clicks away?

CODE:
<script type="text/javascript">
$(document).ready(function() {
$('.show_or_hide_link_clicker').click(function() {
$(".the_box_to_show").fadeIn(400);
});
});
</script>
When show_or_hide_link_clicker is clicked the_box_to_show is shown. How do I hide it if show_or_hide_link_clicker is clicked again or when the user clicks away?
Update: This is what I am doing now: http://jsfiddle.net/nFbnr/
Question: How can i remove the double click requirement ot show the div?

jQuery Toggle is what you're looking for.
$('.the_box_to_show').toggle();

When clicking anywhere, check if the element was on the propagation path. If not, the user clicked outside of it so you can hide it.
$(document).click(function(e) {
if ($(e.target).closest(".the_box_to_show").size() === 0) {
$(".the_box_to_show").hide();
}
});
http://jsfiddle.net/vdHAu/

$(document).click(function(e) {
if (!$(e.target).is(".the_box_to_show")) {
$(".the_box_to_show").hide();
}
});
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(".the_box_to_show").fadeIn(400);
});

An another way without delegate event to document level:
you have to set attribute tabindex to the box and CSS outline for style
http://jsfiddle.net/GV56b/
$(document).ready(function () {
$('.show_or_hide_link_clicker').click(function () {
$(this).hide();
$(".the_box_to_show").fadeIn(400, function () {
this.focus()
});
});
$(".the_box_to_show").on('blur',function(){
$(this).hide();
$('.show_or_hide_link_clicker').fadeIn(400);
});
});

check this out
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(this).addClass('active);
$(".the_box_to_show").fadeIn(400);
});
$(document).on('click', 'html', function(){
$(".the_box_to_show").fadeOut(400);
});
$(document).on('click', '.active', function(e){
e.stopPropagation();
});

jQuery Hide Toggeled Div On Document.click

I currently have the following code:
$(function(){
$('#btn_signIn').click(function(){
$('#div_signInBox').toggle("fast");
});
});
I need to hide the div_signInBox toggled div anytime any other part of the window is clicked...
Thanks!

Is this what you want?
$(function() {
$('#div_signInBox,html').click(function() {
if ($(this).is('#div_signInBox'))
return false;
$('#div_signInBox').toggle("fast");
});
});