javascript - JQuery Mobile vclick 事件仅触发一次

Question

我正在尝试做一个简单的按钮翻转，在 vclicked 时更改它的图标，但真的不明白为什么 vclick 事件只触发一次，有人可以解释一下吗？如果我使用“click”或将事件直接附加到按钮元素，我会得到相同的结果。

JSFiddle 位于:http://jsfiddle.net/w7quoyn4/

$('#btnAddToCart').on('vclick', function () {

    console.log("btnAddToCart vclick event fired");

    if ($(this).attr('data-icon', "plus")) {
        $(this).attr('data-icon', "minus").button().button("refresh");
    } else {
        $(this).attr('data-icon', "plus").button().button("refresh");
    }

});

提前致谢:)

Answer 1

您的代码中有两个问题。

首先，条件表达式 $(this).attr('data-icon', "plus") 调用 attr() 的 setter 形式，它将始终返回调用它的 jQuery 对象。由于对象在 bool 上下文中始终为 true，因此您的 else 分支永远不会被采用。

要解决这个问题，您可以调用 attr() 的 getter 形式并比较结果:

if ($(this).attr("data-icon") == "plus") {
    // ...
}

话又说回来，对 button() 的调用是问题的核心。适当的使用方法是 buttonMarkup() ，但自 1.4 版起已弃用(并将在 1.5 中删除)。

实际的解决方案是自己添加和删除适当的类，如下所示:

$(document).on("vclick", "#btnAddToCart", function () {
    console.log("btnAddToCart vclick event fired");
    $(this).toggleClass("ui-icon-plus ui-icon-minus");
});

您可以在 this updated fiddle 中看到结果.