Question

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

JSFiddle at：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对象。由于对象在布尔上下文中始终为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中看到结果。

JQuery Mobile vclick事件只触发一次

1 个答案: