I just started using a jquery mobile custom theme instead of one of the defaults. Lots of issues...but the current one is that dynamically created buttons don't work as expected.
I have some dynamic html I'm injecting via $("#container").append(...)
<div>
<a class="view-it" data-role="button" href="">View</a>
</div>
Because it's dynamic, I need to do
$("*[data-role='button']").button();
to get it to initialize.
Although my button now looks like a button, the anchor instead still looks like a hyperlink and the click event only fires when clicking on the hyperlink inside the button, not on other areas of the button itself.
Any ideas?
Update:
If I use a div like so instead of an anchor
<div class="view-it" data-role="button">
View
</div>
It displays correctly now, but still doesn't respond to clicks across the entire button's surface...only around the text (+ a tiny bit of margin)
data-role=button is deprecated so you need to add classes manually and it doesn't require any manual enhancement even if you append them dynamically. .button() is used for <input type=button> only.
Your solution is as follows:
var Btn = '<a href="#" class="ui-btn ui-btn-Custom ui-btn-icon-Position ui-icon-Name">Button</a>';
$(".selector").append(Btn);
ui-btn-Custom: is theme swatch i.e. ui-btn-a
ui-btn-icon-Position: icon's position, left,right,top,bottom or notext i.e. ui-btn-icon-left
ui-icon-Name: icon's image i.e. ui-icon-home