Question

嘿伙计们，我有一个小按钮功能，不会犯错，但也无法正常工作。 addItem被称为fine，并将类从“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

尝试将实时事件附加到<a/>元素。

请参阅this

Answer 4

事件授权基本上就是你要找的......

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

使用jQuery来回更改类？

4 个答案: