JQuery Mobile Custom Theme Buttons

Question

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)

Answer 1

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

Demo