Question

Hey guys, I have a little button functionality that is not erring, but also not working.
The addItem gets called fine, and switches the class from “add-button” to “in-cart-button”, but the $(“a.in-cart-button”).click(… doesn’t seem to be firing. When I click the “in-cart-button”, instead it triggers the addItem function again… Any ideas?

function addItem(t_id) {
    $("#" + t_id).addClass("in-cart-button").removeClass("add-button");
}

function removeItem(t_id) {
    $("#" + t_id).addClass("add-button").removeClass("in-cart-button");
    alert("Remove item with id: " + t_id);
}

$("a.add-button").click(function(event) {
    event.preventDefault();
    addItem(event.target.id);
});

$("a.in-cart-button").click(function(event) {
    event.preventDefault();
    removeItem(event.target.id);
});

Thanks!

Answer 1

Instead of .click() which binds the elements when they’re found initially (by which classes they had initially), you would need .live() here, like this:

$("a.add-button").live('click', function(event) {
//and
$("a.in-cart-button").live('click', function(event) {

With .click() when the element’s class changes it doesn’t have an effect on the handlers, all that matters is which elements had the class when you called $("a.add-button") and $("a.in-cart-button"), it found the elements and bound to those…what happens to the element afterwards doesn’t matter, the handlers bound to the element, not the class. With .live() it checks the class when you click 🙂