We Keep Coding

JQuery click same button with different class

I have a button with class name test-button test-button--check. After clicking test-button--check it should do something and be replaced by class test-button--reset
For test-button--reset I want to write another function, but It doesn't work. Because, the previous function executes again.
$(".test-button--check").on("click", function() {
alert("Check is clicked");
$(this).removeClass("test-button--check").addClass("test-button--reset");
});
$(".test-button--reset").on("click", function() {
alert("Reset is clicked");
$(this).removeClass("test-button--reset").addClass("test-button--check");
});
What can I do?
Thanks

You can write your code inside the document.ready in this way
$(".test-button--check .test-button--reset").on("click", function(e) {
e.preventDefault();
var obj=$(this);
if($(obj).hasClass('test-button--check')){
alert("Check is clicked");
$(this).removeClass("test-button--check").addClass("test-button--reset");
}
if($(obj).hasClass('test-button--reset')){
alert("Reset is clicked");
$(this).removeClass("test-button--reset").addClass("test-button--check");
}
});

Try using .off() to remove an event handler, in this case, it is click.
Should be something like this:
$('.test-button.test-button--reset').off().click(function() {...});

I think this will work:
var check = function checkFunc() {
alert('Check is clicked!');
$(this).addClass('test-button--reset').removeClass('test-button--check');
$('.test-button--reset').unbind('click',check);
$('.test-button--reset').bind('click',reset);
}
var reset = function resetFunc() {
alert('Reset is clicked!');
$(this).addClass('test-button--check').removeClass('test-button--reset');
$('.test-button--check').unbind('click',reset);
$('.test-button--check').bind('click',check);
}
$('.test-button--check').bind('click',check);
Using bind and unbind

Password Hide/Show Button only works one-way

I've build a little function which should change the content of a span, which lies in a <td> together with a button to the value of the button on the first push of the button. When the button is pushed again, it should replace the content with four asterisks.
Unfortunately, it only works one-way
$(".pw_show").click(function () {
$(this).parent('td').children('span').html($(this).attr('value'));
$(this).toggleClass('pw_hide pw_show');
});
$(".pw_hide").click(function () {
$(this).parent('td').children('span').html("****");
$(this).toggleClass('pw_hide pw_show');
});
Fiddle down here: http://jsfiddle.net/kXNk8/218/

You toggle the classes so you need to use dynamic event binding with .on() instead of .click():
$('table').on('click',".pw_show", function () {
$(this).parent('td').children('span').html($(this).attr('value'));
$(this).toggleClass('pw_hide pw_show');
});
$('table').on('click',".pw_hide", function () {
$(this).parent('td').children('span').html("****");
$(this).toggleClass('pw_hide pw_show');
});
jsFiddle example
After the first click, .pw_show no longer exists on the element which causes your issue.

Delegating to a static element using .on() will make it work or you should change it totally.
$(document).on("click", ".pw_show", function () {
$(this).parent('td').children('span').html($(this).attr('value'));
$(this).toggleClass('pw_hide pw_show');
});
$(document).on("click", ".pw_hide", function () {
$(this).parent('td').children('span').html("****");
$(this).toggleClass('pw_hide pw_show');
});
Fiddle: http://jsfiddle.net/4atrmks3/

You should really just toggle the attribute for type between password and text not use a placeholder.
var password = false;
$('a').click(function(){
if (!password){
password = true;
$('input').attr('type', 'password');
} else {
password = false;
$('input').attr('type', 'text');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
Click to toggle password / text

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

onclick function for input checkbox - check on page load and also on click

I have this code:
$('input.ShowResellerAccounts').on('click', function(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
which hides/shows a table tbody id on click.
how can i make this code run on page load as well as on click?

In the document.ready function you can trigger the click event like
$('input.ShowResellerAccounts').trigger('click');

Separate it into a function and bind in on load as well as on click:
function checkInput(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
$(document).ready(function() {
$('input.ShowResellerAccounts')
.on('click', checkInput) // bind to click
.each(checkInput); // call now
});

u can use $(document).ready :
$(document).ready(function(){
//put your code here
});

Run button click event only once further clicks needs to be forwarded to other function

I have a button as follows
<input type="button" id="btn" value="Click Me" />
and I have 2 functions
function event1(){
alert("1st Time Clicked");
}
function event2(){
alert("Further Clicks");
}
I want to run event1 function for 1st time when the user clicks on that button and for subsequent requests I need to run event2 function.
I tried the following way
$(document).ready(function(){
$("#btn").one("click",function(){
event1();
});
});
But I can't figure it out how to run event2 function for further clicks.
How Can I do that in Jquery ?
I created Jsfiddle = http://jsfiddle.net/rajeevgurram/d9Z3c/

In the first click handler(using .one()), register a normal click handler so that further clicks will trigger that handler
$(document).ready(function () {
$("#btn").one("click", function () {
event1();
$(this).click(event2)
});
});
Demo: Fiddle

I like booleans so I use
$(document).ready(function(){
var clicked = false;
$("#btn").on("click",function(){
if(!clicked) {
event1();
clicked = true;
} else {
event2();
}
});
});
P.S. I just wanted to be different from the first answer. XD