在主干视图中切换 jquery-mobile ui 按钮的图标

Question

我在使用以下代码更改 jquery-mobile 属性时遇到问题：

 this.$("#" + idOfButton).attr('data-icon', "check")
     .find('.ui-icon')
     .addClass('ui-icon-' + "check")
     .removeClass('ui-icon-' + "grid");

运行此代码时，我会在我的 chrome 调试器中看到所有类和数据角色的更新。我在主干视图中执行此操作。

问题是我从未在实际视图中看到更改发生，并且视图仍然显示旧的网格图标。

Answer 1

我认为您的选择器有问题。使用$("#" + idOfButton) 选择元素就足够了。所以，要更改图标：

$("#" + idOfButton).removeClass('ui-icon-grid').addClass('ui-icon-check');

仅供参考：jQuery Mobile 对按钮具有某种“双重性”，可以使用<input> 和<a> 标记来声明。因此，可以通过两种方式更改图标。

HTML：

<input type="button" data-icon="grid" id="test_input" value="Test with 'input' tag"/>
<a href="#" data-role="button" data-icon="grid" id="test_a">Test with 'a' tag</a>

<a href="#" data-role="button" data-inline="true" id="change">Change icon</a>

JavaScript：

$(document).on("click", "#change", function()
{
    $("#test_input").button("option", "icon", "check");
    $("#test_a").removeClass("ui-icon-grid").addClass("ui-icon-check");
});

JSFiddle

---

更新涉及 jQuery Mobile 1.1.2 / 1.2.0

增强是不同的，这是可行的：

$("#test_a").find(".ui-icon").removeClass("ui-icon-grid").addClass("ui-icon-check");

但您不能使用$(document).on() 附加事件。改为使用：

$("#change").live("click", function()
{
    $("#test_a").find(".ui-icon").removeClass("ui-icon-grid").addClass("ui-icon-check");
});