jquery mobile -- 使 ui-btn-active 应用于活动列表项

Question

我在 jquery mobile 中有一个弹出列表，有两个项目可以点击选择。我无法让 jquery mobile “记住”——通过class='ui-btn-active'——选择了哪个列表视图项。您单击了一个列表项，但 ui-btn-active 类没有附加到它。

这是我正在使用的 jquery（不起作用）：

$('a.switchview').on('click', function () {
    $(this).addClass('ui-btn-active ui-state-persist');
});

这是 HTML：

<div data-role='page' data-add-back-btn='true'>
    <a href='#popupSwitchView' class='ui-state-persist ui-btn ui-shadow ui-corner-all ui-icon-eye ui-btn-icon-notext ui-alt-icon  ui-nodisc-icon ui-btn-inline' data-transition='slideup' data-rel='popup' data-inline='true'>Switch view</a>

    <div data-history='false' data-role='popup' id='popupSwitchView'>
<a href='#' data-rel='back' data-role='button' data-icon='delete' data-iconpos='notext' class='ui-btn-right' data-theme='a'>Close</a>

        <ul data-role='listview' data-icon='delete'>
            <li data-role='list-divider' style='font-style: oblique;'>Select choice</li>
            <li><a href='javascript:;' data-role='button' data-transition='fade' data-mini='true' class=' switchview' id='choiceA' name='theView' value='choiceA'>Choice A</a>

            </li>
            <li><a href='javascript:;' data-role='button' data-transition='fade' data-mini='true' class='switchview' id='choiceB' name='theView' value='choiceB'>Choice B</a>

            </li>
        </ul>
    </div>
</div>

FIDDLE

任何想法为什么这不起作用？

Answer 1

从点击事件中返回 false 并从之前的选择中移除活动类：

$('a.switchview').on('click', function () {
    $('a.switchview').removeClass('ui-btn-active ui-state-persist');
    $(this).addClass('ui-btn-active ui-state-persist');
    return false;
});

更新FIDDLE