1

嘿，伙计们，我有一个不会出错但也不起作用的小按钮功能。addItem 被正常调用，并将类从“add-button”切换到“in-cart-button”，但 $("a.in-cart-button").click(... 似乎没有被解雇当我点击“in-cart-button”时，它会再次触发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);
});

谢谢！

4

4 回答 4

6

而不是.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()您单击时，它会检查班级:)

于 2010-08-13T17:40:18.273 回答
1

那是因为当页面加载时，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);
于 2010-08-13T17:41:31.907 回答
0

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

看到这个

于 2010-08-13T17:41:47.433 回答
0

事件委托基本上是您正在寻找的......

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

于 2010-08-13T20:43:31.413 回答