Update data-theme after page load with jquery mobile

I have a couple of buttons in a control group to represent on/off and I want to switch their themes when clicked. I am able to change the theme when I click on one of the buttons, but once I move t开发者_如何学Che mouse so it isn't hovering over it, it changes the theme back to what it was before. How can I make the theme stick? Here is 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);
    });

First you need to add class attributes to the div's.