We Keep Coding

add and remove class on same button or element

I'm looking for a way to add and remove class on the same button. So far this is my work in progress. The concept is when I click on the menu button it shows the menu. When I tap on the menu button again. The menu hides
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').addClass('show');
});
});

To achieve this you can use .toggleClass() like so:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
JsFiddle example
toggleClass
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
For more information about this function check here
Hope this helps!

You should use $(this) and toggleClass
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$(this).toggleClass('show');
});
});
which will add the class back to the specific element that was clicked.
http://api.jquery.com/toggleclass/
http://www.learningjquery.com/2007/08/what-is-this

Try this:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});

DEMO
$('.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
Try this way

You can use .add() method with .toggleClass():
$(document).ready(function() {
$('button.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').add(this).toggleClass('show');
});
});
.portfolio-contact-form-wrap {
color:blue;
}
.show {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-portfolio">Button</button>
<div class="portfolio-contact-form-wrap">
<h1>contact form</h1>
</div>

Use toggleClass('show')
It will add the class on one click and remove the class on the second click.

<script>
$(document).ready(function () {
$('button.toggle-portfolio').on('click', function (e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
</script>

Click event not firing using ON?

When i click on any button , click event is not fired . Tough i made it work using $("div").on("click", "button", function () { but i want to see it working using .class selector .
Syntax of ON:
.on( events [, selector ] [, data ], handler )
Html:
<div>
<button class='alert'>Alert!</button>
</div>
Code:
$(document).ready(function () {
$("div button").on("click", ".alert", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});
sample to work here
It may be basic but i'm seriously starting to try & understand few concepts . Help me understand .

Your current code is trying to delegate the event for element with class alert in button. which do not exists.
If you are trying to delegate the event for button with class alert,You need to use:
$("div").on("click", "button.alert", function () {
console.log("A button with the alert class was clicked!");
});
Working Demo

$(document).ready(function () {
$("div").on("click", "button.alert", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});

You can also try this...
$(document).ready(function () {
$("div button.alert").on("click", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});
FIDDLE for reference

jquery timepicker set time click function

Jquery timepicker set button click function not working.
I tried to add a class to <div id="ptTimeSelectSetButton">
using $('#ptTimeSelectSetButton a').addClass('timePickClass');
<div id="ptTimeSelectSetButton"> it's a div inside timepicker
I tried to add click functions on using div id and '' tag inside the div.
unfortunately the click function not working. if anybody know the reason please share here.
HERE DEMO
html page
Start Time <input id="sample1" type="text"></input>
End Time <input id="sample2" type="text"></input>
Script
$(document).ready(function(){
$("#sample1").ptTimeSelect();
$("#sample2").ptTimeSelect();
$('#ptTimeSelectSetButton a').addClass('timePickClass');
});
// click on div
$('#ptTimeSelectSetButton').click(function(e) {
alert('Working with div id');
});
//or click on <a href> tag
$(".timePickClass").click(function(e) {
alert('working with a tag class');
});

You have to put the click events inside the $(document).ready or use event delegation as others said:
$(document).ready(function(){
$("#sample1").ptTimeSelect();
$("#sample2").ptTimeSelect();
$('#ptTimeSelectSetButton a').addClass('timePickClass');
//or click on <a href> tag
$(".timePickClass").click(function(e) {
alert('working with a tag class');
});
// click on div
$('#ptTimeSelectSetButton').on('click', function(e) {
alert('Working with div id');
});
});

The div is create dynamically when the popup is shown so you need to use event delegation
$(document).on('click', '#ptTimeSelectSetButton a', function (e) {
alert('Working with div id');
});
Demo: Fiddle

Use event delegation for dynamically created DOM elements
$(document).ready(function(){
$("#sample1").ptTimeSelect();
$("#sample2").ptTimeSelect();
$('#ptTimeSelectSetButton a').addClass('timePickClass');
});
// click on div
$(document).on('click', '#ptTimeSelectSetButton', function(e) {
alert('Working with div id');
});
//or click on <a href> tag
$(document).on('click', ".timePickClass" ,function(e) {
alert('working with a tag class');
});
Fiddle

jquery input field focus out except a div

I'm making ajax suggestion of search in which,
a suggestion box will be displayed
<div id="searchbox">
<input type="text" name="search" class="searchinput"/>
</div>
<div id="sugbox">
......
<a href="product.php?id=2" >Item 1</a>
.....
</div>
and Javascript
$('#searchbox .searchinput').focus(
function () {
$('#searchbox #sugbox').show();
});
$('#searchbox .searchinput').focusout(
function () {
$('#searchbox #sugbox').hide();
});
The suggestion box will open if the search textbox #searchbox .searchinput is focus and hide if focusout.
Problem : whenever i'm clicking the link on suggestion box, the suggestion box hides (because of input focusout event).
How can i check if the target div is the suggestion box so don't hide the box
ex ..
$('#searchbox .searchinput').focusout(
function () {
if(target div is not sugbox)
$('#searchbox #sugbox').hide();
});

try to assign a class to sugbox at hover class
$(".searchinput").focus(function(){
$("#sugbox").show();
});
$(".searchinput").focusout(function(){
if(!$("#sugbox").hasClass("hovered"))
$("#sugbox").hide();
});
$("#sugbox").hover(function(){
$(this).addClass("hovered");
},function(){
$(this).removeClass("hovered");
});
here is example at jsfiddle : http://jsfiddle.net/kyawlay/9wg49L2b/5

add a mousedown handler (triggerd before focusout/blur I think) on the box also, set a flag to true when clicked, then check this flag before hidding
var boxClicked = false;
$('#mainsearch .searchinput').mousedown(// listen click handler
function () { boxClicked = true;});
$(document).mousedown(// reset boxclicked
function () { boxClicked = false;});
$('#searchbox .searchinput').focus(
function () {
$('#searchbox #sugbox').show();
});
$('#mainsearch .searchinput').focusout(
function () {
if(!boxClicked) $('#mainsearch #sugbox').hide();// add condition
});

You are using wrong selector. Check this demo. http://jsfiddle.net/m711LLwr/
$('#searchbox #sugbox').show();
Should be
$('#mainsearch #sugbox').show();

Try this, What it does is when searchinput loses focus then if sugbox has no class 'NoHide', then hide it.
On body on click event, the NoHide class is assigned to sugbox if click target is not searchinput and not sugbox and not sugbox anchor.
If event target is not in above 3 mentioned selectors then remove class NoHide. I have a fiddle but I want you to try in your page as fiddle will confuse you( as it has iframe and body area of fiddle is limited).
$('#searchbox .searchinput').focus(
function () {
$('#sugbox').show();
});
$('#searchbox .searchinput').focusout(
function (event) {
if(!$('#sugbox').hasClass('NoHide'))
$('#sugbox').hide();
});
$('body').on('click',
function (event) {
if(!$(event.target).is(".searchinput") && !$(event.target).is("#sugbox a") && !$(event.target).is("#sugbox")){
$("#sugbox").hide().removeClass('NoHide');
}else
{
$("#sugbox").show().addClass('NoHide');
}
});

jquery function dont reflect the class change made my another event

hover class anchor alerts it's title value on hover and when on nohover class anchor, add nopop class to the anchor with hover class. and thus to stop hover alert as it is expected to alert only on hover class without nopop class.
<a class="hover" title="bla bla bla">hover alert</a><br/>
<a class="nohover">stop hover alert</a>
please where I went wrong here
$(function () {
$(".hover:not(.nopop)").hover(function () {
alert($(this).attr("title"));
})
$(".nohover").hover(function () {
$(".hover").addClass("nopop");
});
});
Fiddle http://jsfiddle.net/z4BHJ/8/

You need to use a delegated handler since the selector is dynamic
$(function () {
$(document).on('mouseenter', '.hover:not(.nopop)', function () {
alert($(this).attr("title"));
})
$(".nohover").hover(function () {
$(".hover").addClass("nopop");
});
});
Demo: Fiddle