jQuery Mobile vclick事件仅触发一次

Question

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

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（）的设置方法 ，该方法将始终返回被调用的jQuery对象。 由于对象在布尔上下文中始终为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");
});

您可以在此更新的小提琴中查看结果。