We Keep Coding

Using JQuery to open close menu

ok so I have this script that controls an open/close of menu ....
of the three major functions (seen below) the first two work well in that the button-toggle changes its class (to an X) "active" which makes it an X.
However the fourth (commented out )function doesn't work... This was designed so that when you click on the body or anywhere other than the menu when it is open , it will close. please can someone help me to rewrite the last function so that it works.
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
/*$('body').on('click', function(e){
if( !$(this).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});*/
});
I have provided a JSFiddle below (The menu is set to full colapse on startup not open as in the demo fyi)
http://jsfiddle.net/greggy_coding/ppX53/66/

Use e.target instead of this, as this refers body and not current clicked element.
event.target
The DOM element that initiated the event.
$('body').on('click', function (e) {
if (!$(e.target).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});
Updated Fiddle

Here is the modified javascript that would work:
$(document).ready(function(){
$('#menu').multilevelpushmenu();
});
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function (e) {
e.stopPropagation();
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
$('#menu').on('click', function(e) {
e.stopPropagation();
});
$('body').on('click', function(e){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
});
});
Here is the forked working jsfiddle:
http://jsfiddle.net/ytnLyqrv/1/

Jquery events does not work

I'am trying to change the class of some input elements during some mouse events but only mouseover and mouseout events are working, what can be the reason of this problem ?
$(document).ready(function(){
$('.registerFormElements').mouseover(function(){
this.className='bright';
});
$('.registerFormElements').mouseout(function(){
this.className='';
});
$('.registerFormElements').focus(function(){
this.className='bright';
});
$('.registerFormElements').blur(function(){
this.className='';
});
});

Try to use the code :
$(this).attr('class', '');
or
$(this).attr('class', 'myClass');
and you can too
$(this).addClass('myClass');
$(this).removeClass('myClass');

$(document).ready(function(){
var classname= 'bright';
/*Can create a variable so that you can use it later. By creating variable we can avoid searching in entire dom again*/
var formElement = $(".registerFormElements");
/*Used chaining*/
formElement.on( "mouseover focus", function() {
$(this).addClass(classname);
})
.on( "mouseout blur", function() {
$(this).removeClass(classname);
});
});

You can use addClass() and removeClass()
$(this).removeClass(); //It clears all classes
$(this).addClass('MyClass');

you could bind many events and look at the event.type and toggle the class you want:
$(document).ready(function(){
$('.registerFormElements').on('focus mouseenter mouseleave blur', function(e) {
var element = $(this);
var shouldHaveBright = e.type === 'focus' || e.type === 'mouseenter';
var hasFocus = element.is(':focus');
element.toggleClass('bright', shouldHaveBright || hasFocus);
});
});

It seems to be working for me. Check your class names don't have typos in them. Also, by focus do you mean tab to the input? This is what triggers focus events.
See my fiddle:
http://jsfiddle.net/AdqzA/
$('.registerFormElements').mouseover(function(){
this.className='bright';
});
$('.registerFormElements').mouseout(function(){
this.className='';
});
$('.registerFormElements').focus(function(){
this.className='bright';
});
$('.registerFormElements').blur(function(){
this.className='';
});

Your Jqueries might be conflicting :-
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.registerFormElements').mouseover(function(){
this.className='bright';
});
$j('.registerFormElements').mouseout(function(){
this.className='';
});
$j('.registerFormElements').focus(function(){
this.className='bright';
});
$j('.registerFormElements').blur(function(){
this.className='';
});
});

jquery/javascript how to use $.each on a collection

I need some help with this jQuery code. The code below works fine but i tried to use $.each instead and its not working.
$(document).ready( function(){
$('#pull').click( function(event){
event.stopPropagation();
$('#pf').slideToggle();
});
$('#pullo').click( function(event){
event.stopPropagation();
$('#pt').slideToggle();
});
$('#pullc').click( function(event){
event.stopPropagation();
$('#pc').slideToggle();
});
$(document).click( function(){
$('#pt').hide();
$('#pf').hide();
$('#pc').hide();
});
});
The code below is not working for me, please help
var pul = ["#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"];
$(document).ready( function(){
$.each(pul, function(i, v){
$(i).click( function(event){
event.stopPropagation();
$(v).slideToggle();
});
$(document).click(function(){
$(v).hide();
});
});
});

Make your collection object instead of array:
Here is Demo
var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};
$(document).ready( function(){
$.each(pul, function(i, v){
$(i).click( function(event){
event.stopPropagation();
$(v).slideToggle();
});
$(document).click(function(){
$(v).hide();
});
});

Try this,
var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};
$(document).ready( function(){
$.each(pul, function(i, v){
$(i).click( function(event){
event.stopPropagation();
$(v).slideToggle();
});
$(document).click(function(){
$(v).hide();
});
});
});

You have two ways you can solve this. Either make your array as 2D array:
var pul = [
["#pull", "#pt"],
["#pullo", "#pf"],
["#pullc", "#pc"]];
And you can do $(v[0]).click(... instead of $(i).click(.... And $(v[1]).hide(); instead of $(v).hide();.
Or, you can convert it to an object like others have suggested:
var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};
Right now, you have an invalid object and an invalid array.

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

Two listeners on one element: let only one fire

In situations where multiple event handlers are operating on a single element and action, how can I force only one of the events to fire? JSFiddle.
$("#buttons").on("click", "button", function(){
// only do this if the event below isn't fired
});
$("#buttons").on("click", "button.red", function(){
// if this one happens, don't do the above one
});

For a more general solution, event.stopImmediatePropagation() will prevent the event from triggering any more handlers. For handlers bound to the same element, the order they are bound seems to matter. You could also bind the one that you conditionally don't want to fire to an element higher in the DOM and use e.stopPropagation():
$(document).ready(function(){
$("#buttons").on("click", ".red", function(e){
e.stopImmediatePropagation();
$(this).css("color","red");
});
$("#buttons").on("click", "button", function(){
$(this).css("background","blue");
});
});
http://jsfiddle.net/Ef5p7/
Here's how you could use stopPropagation() instead:
<div id="buttonsOuter">
<div id="buttons">
<button>turn blue</button>
<button class="red">only turn text red</button>
<button>turn blue</button>
<button>turn blue</button>
<button>turn blue</button>
</div>
</div>
...
$(document).ready(function () {
$("#buttons").on("click", ".red", function (e) {
e.stopPropagation();
$(this).css("color", "red");
});
$("#buttonsOuter").on("click", "button", function () {
$(this).css("background", "blue");
});
});
http://jsfiddle.net/CwUz3/

Change the first event handler to:
$("#buttons").on("click", "button", function(){
$(this).not('.red').css("background","blue");
});
jsFiddle example

$("#buttons").on("click", "button, button.red", function(){
// if this one happens, don't do the above one
});

Try using :not() http://api.jquery.com/not-selector/
$(document).ready(function(){
$("#buttons").on("click", "button:not(.red)", function(){
$(this).css("background","blue");
});
$("#buttons").on("click", "button.red", function(){
$(this).css("color","red");
});
});
Here's the working fiddle:
http://jsfiddle.net/SpFKp/4/

Try this,the functions will be called but you can add condition to not run the code:
var functionCalledFlag =false;
$("#buttons").on("click", "button", function(){
if(!functionCalledFlag ){
functionCalledFlag =true;
// only do this if the event below isn't fired
}else{
functionCalledFlag =false;
}
});
$("#buttons").on("click", "button.red", function(){
if(!functionCalledFlag ){
// only do this if the event above isn't fired
functionCalledFlag =true;
}else{
functionCalledFlag =false;
}
});