Updating data theme after page load using jquery mobile

Question

I have a couple of buttons in a control group to represent on / off, and I want to switch their themes when pressed. I can change the theme when I press one of the buttons, but as soon as I move the mouse so that it does not hover over it, it changes the theme to what it was before. How can I make a stick theme? Here are my buttons and 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);
    });

Answer 1

First you need to add attributes classto div.