We Keep Coding

Remove/add a class and then execute an event on this new class

I use this script to change a class:
$('.fa.fa-plus-circle').each(function() {
$(this).on('click', function () {
$(this).removeClass().addClass("fa fa-minus-circle");
});
});
Then I used
$('.fa.fa-minus-circle').each(function () {
$(this).on('click', function () {
$(this).removeClass().addClass("fa fa-plus-circle");
});
});
So for the first one "fa.fa-plus-circle" that is the default when the page is loading, everything is good and the class changes. But when the class changes I can't do anything else after, JQuery continues to execute
$('.fa.fa-plus-circle').each(function() {
$(this).on('click', function () {
$(this).removeClass().addClass("fa fa-minus-circle");
});
});
Why ??
Thanks in advance

You need to use delegate for this, because you are adding the classes dynamically.
$(document).on("click", '.fa.fa-minus-circle', function() {
$(this).removeClass().addClass("fa fa-plus-circle");
});
$(document).on("click", '.fa.fa-plus-circle', function() {
$(this).removeClass().addClass("fa fa-minus-circle");
});
Also there is no need for looping through the elements for binding the event.
But the recommended approach will be,
$('.fa').click(function() {
$(this).toggleClass("fa-minus-circle fa-plus-circle");
});
Edit
$(document).on("click", ".fa", function() {
$(this).toggleClass("fa-minus-circle fa-plus-circle");
});

It's not .fa-minus-circle when it loads, so the each loop never happens. Even if you removed the each loop (which isn't required) it wouldn't add the listeners because it wouldn't find the selector. So, you have to use the delegates version of on which looks something like this...
$('body').on('click','.fa-minus-circle',function () {
$(this).removeClass().addClass("fa fa-minus-circle");
});
fwiw, you could just use one class and toggleClass Then put all your fa-plus-circle code into the fa class since that is the default behavior.
$('body').on('click','.fa',function () {
$(this).toggleClass("fa-minus-circle");
});

There's a benefit to not removing all classes. There seems no point to removing .fa so that you can add it. Which means that your code should be:
$(function() {
$(document).on("click", '.fa.fa-minus-circle', function() {
$(this).removeClass('fa-minus-circle').addClass("fa-plus-circle");
});
$(document).on("click", '.fa.fa-plus-circle', function() {
$(this).removeClass('fa-plus-circle').addClass("fa-minus-circle");
});
});
And as #AnoopJoshi has pointed out, you can use the .toggleClass() method:
$(function() {
$('.fa').on('click', function() {
$(this).toggleClass('fa-minus-circle fa-plus-circle');
});
});

Jquery click event on button without class or id

I have this button that I can't change, nor can I edit toCashier():
<input type="button" value="Till kassan" onclick="toCashier()">
And I want to track if it's clicked and execute some javascript.
$(document).ready ( function () {
$('button[value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
I tried that but it doesn't seem to work. I tried various things but can't get it to work.

You have mismatched input and button, try the following :
$(document).ready ( function () {
$('input[value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
Or
$(document).ready ( function () {
$('input[type="button"][value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});

button !== input
You need to use the correct selector.
$('input[value="Till kassan"]')

If you make the click with function, toCashier() function need to create :
function toCashier(){
alert("Night button clicked");
}

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

Unbind and rebind click on css transition end

I'm having troubles with the .bind() and .unbind() features. When the button is clicked, it's supposed to change the color of the box. During this time, the button is disabled by unbinding the click function. However, I'm having issues rebinding the click when the css transition completes.
What I have so far is:
$('button').on('click', function(){
$('button').unbind('click');
$('.box').toggleClass('color');
$('.box').one('webkitTransitionEnd transitionend', function(e){
console.log('transition ended')
$('button').bind('click')
});
});
http://jsfiddle.net/t6xEf/

You need to pass the click handler when binding it. So create a function reference then use it while binding the handler.
function click() {
$('button').off('click.transition');
$('.box').toggleClass('color');
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
console.log('transition ended')
$('button').on('click.transition', click)
});
$('button').on('click.transition', click);
Demo: Fiddle
Also look at the usage of namespaces while registering/removing the handler because if there if some other click handler added to the button we don't want to disturb it
Also do not add a event handler inside another one
Also have a look at .one()
function click() {
$('.box').toggleClass('color');
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
console.log('transition ended')
$('button').one('click.transition', click)
});
$('button').one('click.transition', click);
Demo: Fiddle

I would use a flag instead of binding/rebinding the event handler:
var animating = false;
$('button').on('click', function() {
if (animating) return;
animating = true;
$('.box').toggleClass('color')
.on('webkitTransitionEnd transitionend', function(e) {
animating = false;
});
});
http://jsfiddle.net/t6xEf/1/

Do not unbind. Use a boolean:
var onTrans = false;
$('button').on('click', toggle);
function toggle() {
if (!onTrans){
$('.box').toggleClass('color');
onTrans = true;
$('.box').on('webkitTransitionEnd transitionend', function (e) {
onTrans = false;
});
}
}
http://jsfiddle.net/jp8Vy/

This is surely not what you want to do. It seems overly complex, and I can't imagine a good use case scenario.
That being said, you need to reattach the functionality to be performed in the final bind statement. You call the function to bind to the click event, but don't tell the function what to attach.
You need something like this:
$('button').bind('click', function() { ... });
However, that probably isn't what you really want. It sounds like you just want to set the button's "disabled" attribute to false, then to true after the animation.

Adding two click events to the same button only works once

Basically I'm trying to make a button be able to handle editing of an element. I want it so that when I click on the Edit button, it changes the text to Save Changes and adds a class which will then bind the button to another click event so that when they click Save Changes, it'll alert "Saved!" and change the text back to Edit. It does this perfectly once. If you continue to try to do it, it simply won't add the class or change the text anymore.
Here is a demo on jsfiddle
The code:
$(function() {
$button = $('button[name="edit"]');
$button.on('click', $button, function() {
var $that = $(this);
$that.text('Save Changes');
$that.addClass('js-editing');
if ($that.hasClass('js-editing')) {
$that.off('click').on('click', $that, function() {
alert('Saved!');
$that.text('Edit');
$that.removeClass('js-editing');
});
}
});
});​

Try this http://jsfiddle.net/bpD8B/4/
$(function() {
$button = $('button[name="edit"]');
$button.on('click', $button, function() {
var $that = $(this);
if($that.text()=='Edit'){
$that.text('Save Changes');
$that.addClass('js-editing');
}
else{
alert('Saved!');
$that.text('Edit');
$that.removeClass('js-editing');
}
});
});

You never add back the original handler after calling off(), which removes it.
That being said, it might be easier to have two buttons, with appropriate click handlers, and then use hide() and show() to alternate which one is available. To the end user it should look and act exactly the same, and to you it will be a lot less of a headache to code.
Example: http://jsfiddle.net/VgsLA/
I think in the end, this code is more robust and manageable.

This is just a logic problem. And with $that.off('click').on('click', $that, function() { you are delegating to itself, which is not how you should do it.
Here is a solution using your code:
$(function() {
$button = $('button[name="edit"]');
$button.on('click', $button, function() {
var $that = $(this);
if ($that.hasClass('js-editing')) {
alert('Saved!');
$that.text('Edit');
$that.removeClass('js-editing');
} else {
$that.text('Save Changes');
$that.addClass('js-editing');
}
});
});​
Demo