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

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.

Jquery: block onclick div action when click in other object inside

I have this situation: http://jsfiddle.net/Lm7ac/4/
$(".more").hide();
$(document).on("click", ".btn",function() {
alert("hello");
});
$(document).on("click", "div.post",function() {
var morediv = $(this).find(".more");
morediv.slideToggle('fast');
});
I need to keep ".more" closed(or open) when click in ".btn".
How can i do that?
Thanks

Use event.stopPropagation():
$(document).on("click", ".btn",function(event) {
event.stopPropagation();
alert("hello");
});
...note the event argument to the callback, make sure to include it as above.
http://jsfiddle.net/KJ5Uv/
Cheers

Just return false at the end of the .btn click event handler.
$(document).on("click", ".btn",function() {
alert("hello");
return false;
});
When you return false in a jQuery event handler it's like calling event.preventDefault() as well as event.stopPropagation() at the same time.
Here is a demo: http://jsfiddle.net/Lm7ac/5/
Docs for event.preventDefault(): http://api.jquery.com/event.preventDefault/
Docs for event.stopPropagation(): http://api.jquery.com/event.stopPropagation/

jQuery .click() perform the default action before the custom function

Here is my code, I have two checkboxes and want to keep one disabled until the other one is enabled:
$(function(){
$('#remember').live('click', function(event){
if($('#remember').is(':checked')){
$('#keepIn').removeAttr('disabled');
}
else
$('#keepIn').attr('disabled', 'disabled');
});
});
The problem is that this function executes before the default action and when I click in the first one $('#remember').is(':checked') returns false (the old value) instead of true.

You can use change event instead:
$('#remember').live('change', function(event) {
if (this.checked) {
$('#keepIn').removeAttr('disabled');
} else {
$('#keepIn').attr('disabled', 'disabled');
}
});
DEMO: http://jsfiddle.net/jP3NY/
NB: live method is deprecated. You should better use on or delegate.
For the newer version of jQuery the solution could be as follows:
$('body').on('change', '#remember', function(event) {
$('#keepIn').prop('disabled', !this.checked);
});
Instead of body you can use any parent element of #remember.

run function at ready and keyup event

Is there another in jquery to run a function at page load and at a keyup event instead of the way I'm doing it?
$(function() {
totalQty();
$("#main input").keyup(function() {
totalQty();
});
});

Disregarding live or delegate optimizations, you can trigger an event like this:
$(function() {
$("#main input").keyup(function() {
totalQty();
}).filter(":first").keyup(); //Run it once
});
No need for the filter if it's not on multiple elements, just leave it out in that case.

You can use $(document).ready event to run functions on load:
$(document).ready(function(){
/* your code here */
});

Here's what I would do (jQuery 1.4+ )
$(document).ready(function() {
totalQty();
$("#main").delegate("input","keyup",function() {
totalQty();
});
});

You could use $.live(), which does event delegation, which is MUCH more efficient than created an event listener for every single input tag...and then missing any dynamically created ones. Try the following:
$(document).ready(function() {
totalQty();
$('#main input').live('keyup', function() {
totalQty();
});
});