jQuery Mobile 列表视图或按钮刷新不更新主题答案

【问题标题】：jQuery Mobile listview or button refresh doesn't update themejQuery Mobile 列表视图或按钮刷新不更新主题
【发布时间】：2012-07-21 13:56:26
【问题描述】：

您能否尝试这个简单的示例并告诉我出了什么问题：http://jsfiddle.net/ca11111/unQWP/1/。 li 主题已更改，但列表视图刷新无法更新。

如果我想更新右键主题：http://jsfiddle.net/ca11111/unQWP/2/，也会出现同样的问题。我得到了错误：

未捕获的类型错误：无法调用未定义的方法“removeClass”

================================================ ==

我能知道为什么这几乎可以工作，但没有..，（需要点击 2 次才能更改，并且无法返回）

http://jsfiddle.net/ca11111/unQWP/5/

它应该切换主题

【问题讨论】：

太棒了，在我的示例中，它的“b”主题似乎无法使用，可与“e”一起使用
在任何两个主题之间切换应该可以使用我在答案中发布的代码。我只使用了主题 e，因为它在视觉上与主题 c 明显不同。

标签： jquery listview jquery-mobile

【解决方案1】：

您可以使用此处的代码完成您想要的：http://jsfiddle.net/kE8GJ/。请注意，代码中最重要的部分是这个条件：

var element;

if ($(this).hasClass("ui-li-link-alt")) {
    element = $(this);
}
else {
    element = $(this).closest('li.ui-li');
}

element
    .removeClass("ui-btn-up-c ui-btn-hover-c")
    .addClass("ui-btn-hover-e")
    .attr("data-theme", "e");

这将在左侧按钮的li元素或右侧按钮的a元素上正确设置主题，最终具有将新主题应用于单击的元素的效果，这似乎是你的目标。

至于您看到的TypeError，我认为它与您的.button() 通话有关。 jQuery Mobile 列表视图中的元素通常不作为按钮处理，因此此类调用可能会导致问题。所有像.trigger('create') 这样的调用都应该在listview 级别进行。

为了响应您的编辑，您必须手动添加和删除类才能成功切换主题。否则，旧主题的课程仍然存在。例如，如果您从主题 e 切换到 c，ui-btn-up-e 或 ui-btn-hover-e 仍将位于 li 元素上，因此它似乎不会切换回主题 c。你可以在这里看到这个：http://jsfiddle.net/wu86C/。

最重要的代码是这里的第二行（相当于从c 切换到e）：

var li = $(this).closest('li');
li.removeClass("ui-btn-up-e ui-btn-hover-e").addClass("ui-btn-hover-c");

【讨论】：

@JC 再次感谢，1 个细节：右侧按钮上的边框也用黄色着色，没有会更好，知道吗？ jsfiddle.net/kE8GJ/2
@cyril：这可能很难改变，因为边框位于li 元素上，这就是正在设计的样式。这确实超出了最初问题的范围。您可能会更幸运地将其作为一个新问题发布，这也可能有助于更多地关注该问题。

【解决方案2】：

我不确定，但是使用 jquery mobile 你没有你的 html 结构，但是你的“li 中的标签”被包裹在一些 div 中。

如果你简单地尝试一下就会生效：

$('#mylist a').click(function() {
        console.log($(this));        
        $('#li1').attr("data-theme", "e");
        alert( $('#li1').attr("data-theme"));
        $('#mylist').listview('refresh');
    });

在你的第一个小提琴中，这改变了主题。

【讨论】：