Trying to change the value of a link-button when clicking on a menu item.
Sample HTML:
<div id="menu">
<ul data-role="listview" data-icon="false">
<li><a href="#">Value A</a></li>
<li><a href="#">Value B</a></li>
</ul>
</div>
<a href="#" id="selected" data-role="button"></a>
jQueryMobile code snippet:
$('#selected').hide();
$("#menu li a").on('click',function(){
$('#selected').html($(this).html()).slideDown().button("refresh");
});
The text updates as expected, but there is an issue with the button's CSS styling.
An error message is displayed:
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'refresh'
What exactly needs to be initialized here? The page and button seem already set up, right?
Additional attempt using jQueryMobile initialization:
$(document).on("mobileinit", function() {
$('#selected').hide();
$("#menu li a").on('click',function(){
$('#selected').html($(this).html()).slideDown().button("refresh");
});
});
No more error messages are shown; however, the text still doesn't update properly :(