I'm trying to change the data-theme of a button when pressed.
I'm calling this JavaScript function in the button's onClick handler:
function changeNextButtonColor() {
var nextButton = document.getElementById('next');
nextButton.setAttribute('data-theme', 'a');
}
but the theme is not changing. Any ideas?
Once you've set set the theme on the button you'll need to call "refresh" on it like this below...
$("#next").attr("data-theme","a").button('refresh');
If you want to bind this kind of behavior to all "next" buttons in a process and their might be more than one then you might want to consider doing something more like this. It will checked every page for a button that has a class of colorChangeButton and then, when clicked, change the theme to the alternate theme specified on that buttons attribute of data-theme-pressed.
<a href="#" data-role="button" class="colorChangeButton" data-theme-pressed="a" data-theme="b">Next</a>
<script type='text/javascript'>
$('div').live('pageinit', function(){
$("a.colorChangeButton).click(function(){
var $thisButton = $(this);
$thisButton.attr("data-theme",$thisButton.attr("data-theme-pressed")).button('refresh');
});
});
</script>
function changeNextButtonColor() {
$('#next').attr({'data-theme': 'a'});
}
If you're using jQuery, this is your code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.