I have a group of buttons with a specific class
<div class="prog-day">
<div class="prog-clear" data-role="controlgroup" data-type="horizontal>
<a href="#" data-role="button" data-mini="true" data-theme="b">Clear</a>
</div>
<p></p>
</div>
and I am trying to change the theme color on click. The ID and data-theme letter toggle correctly, but the color does not change. Here are the methods I have attempted based on other sources:
$(".prog-day a").click(function() {
console.log("clicked a day button");
progToggle = $(this).attr("progToggle");
if ( progToggle == "1" ) {
$(this).attr("data-theme","b").refresh;
$(this).attr("progToggle","0");
$(this).trigger('create');
$(this).trigger('refresh');
$('.prog-day p').html($(this).attr("progToggle")+$(this).attr("data-theme"));
progToggle = $(this).attr("progToggle");
}
else {
$(this).attr("data-theme","d").refresh;
$(this).attr("progToggle","1");
$(this).trigger('create');
$(this).trigger('refresh');
$('.prog-day p').html($(this).attr("progToggle")+$(this).attr("data-theme"));
progToggle = $(this).attr("progToggle");
}
});
What am I overlooking here? Should I consider avoiding JQM styling and handling it differently? Ideally, I would like the buttons to toggle upon pressing down, rather than releasing. Feel free to experiment with http://jsfiddle.net/PLx8v/3/