2

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)

Jeff
  • 35,755
  • 15
  • 108
  • 220

1 Answers1

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

Omar
  • 32,302
  • 9
  • 69
  • 112
  • so I actually need to add every class instead of saying data-role='button' for every button?? – Jeff Feb 27 '14 at 21:23
  • 1
    @jeff yes, exactly. It's deprecated and will be removed in 1.5. You'll notice that there are no `span`s' wrapped in anchor tag. It's straight forward and faster in processing. – Omar Feb 27 '14 at 21:35
  • 1
    one step forward, four back – Jeff Feb 27 '14 at 22:56
  • 1
    @jeff haha..JQM has deprecated many widgets to enhance performance. If you still want to use `data-role` then use `.buttonMarkup()` instead of `.button()`. It's also deprecated and will be removed but it works for now. – Omar Feb 27 '14 at 23:19