Менять классы назад и вперед с помощью jQuery?

Question

Эй, ребята, у меня есть небольшая функциональность кнопки, которая не ошибается, но также не работает.AddItem вызывается нормально и переключает класс с «add-button» на «in-cart-button», но $ («a.in-cart-button»). Click (... кажется, небыть запущенным. Когда я нажимаю кнопку "в корзине", вместо этого снова запускается функция addItem ... Есть идеи?

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

Спасибо!

Answer 1

Вместо .click(), который связывает элементы при их первоначальном обнаружении (по каким классам они были изначально), вам понадобится .live() здесь, вот так:

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

С .click(), когда класс элемента изменяется, это не влияет на обработчики, все, что имеет значение, это то, какие элементы имели класс, когда вы вызывали $("a.add-button") и $("a.in-cart-button"), это обнаружил элементы и привязал их к ... что потом с элементом не имеет значения, обработчики привязаны к элементу, а не к классу. С .live() он проверяет класс, когда вы нажимаете:)

Answer 2

Это происходит потому, что при загрузке страницы in-cart-button еще нет на странице, поэтому обработчик не подключается.

Просто используйте одну функцию с toggleClass().

function toggleItem(event) {
    $("#" + t_id).toggleClass("add-button in-cart-button");
}

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

---

Другие варианты - использовать .toggle() вместо .click(), который принимает 2 (или более) функции.

Кроме того, вы можете просто передать ссылку на функцию как .click()обработчик, и все еще имеет доступ к объекту event.

function toggleItem( event ) {
    event.preventDefault();
    var $target = $("#" + event.target.id);
    $target.toggleClass("add-button in-cart-button");
    if( $target.hasClass('in-cart-button') )
        alert("Remove item with id: " + t_id);
}

$("a.add-button").click(toggleItem);

Answer 3

Делегирование событий - это в основном то, что вы ищете ...

http://www.jqueryrefuge.com/2010/06/event-handling-the-delegate-way/

Answer 4

Попробуйте присоединить событие live к элементу <a/>.

см. это