Javascript 使用jquery mobile在页面加载后更新数据主题

我在一个控制组中有几个按钮来表示开/关，我想在单击时切换它们的主题。当我点击其中一个按钮时，我可以改变主题，但一旦我移动鼠标使其不再停留在上面，它就会将主题改变回以前的状态。我怎样才能使主题保持不变？以下是我的按钮和javascript：

<div data-role="controlgroup" data-type="horizontal">
  <div title="lights.MyLight.ON" data-role="button">ON</div>
  <div title="lights.MyLight.OFF" data-role="button" data-theme="b">OFF</div>
</div>

$("div[title]").click(function() {
        var action = this.title;
        jQuery.fn.log(action);
        $.ajax({
            url: 'do.php?a='+action,
            cache: false
        });

        var cls = this.getAttribute('class');
        var pcs = cls.split(" ");
        var color = "";

        cls = "ui-btn " + pcs[1];

        if(pcs.length > 3)
        {
          color = pcs[3].split("-");
          cls = cls + " ui-controlgroup-last"
        }
        else
        {
          color = pcs[2].split("-");
        }

        cls = cls + " ui-btn-up-b";

        this.setAttribute('data-theme', 'b');
        this.setAttribute('class', cls);
    });

在…上
关
$（“div[title]”。单击（函数（）{
var action=this.title；
jQuery.fn.log（操作）；
$.ajax({
url:'do.php？a='+操作，
缓存：false
});
var cls=this.getAttribute（'class'）；
var pcs=cls拆分（“”）；
var color=“”；
cls=“ui btn”+pcs[1]；
如果（件长>3）
{
颜色=件[3]。拆分（“-”）；
cls=cls+“上次用户界面控制组”
}
其他的
{
颜色=件[2]。拆分（“-”）；
}
cls=cls+“ui-btn-up-b”；
this.setAttribute（'data-theme'，'b'）；
this.setAttribute（'class'，cls）；
});

首先，您需要将

类

属性添加到

div

。

您是否碰巧有一个onmouseout事件侦听器连接到div（或任何父元素）？这适用于简单的情况，但我可以告诉您，当应用数据主题时，该数据主题也会应用到嵌套的jquery移动小部件。所有这些嵌套小部件还需要更新其数据主题属性和类。更复杂的是，有些小部件似乎将父数据主题应用于特定的嵌套小部件。