JQuery Mobile Append new Buttons not behaving as expected

Question

Possible Duplicate:
jQuery Mobile does not apply styles after dynamically adding content

I'm wondering if I am missing something here...

If I write

<a onclick="deleteThis()" data-role="button" data-theme="a">Button text</a>

within the body of an HTML page it works fine. But when I programatically try and add new buttons using the following :

$('.block').append('<a onclick="deleteThis()" data-role="button" data-theme="a">' + results[i].Title + '</a>');

The link is appended fine just with no JQuery mobile styling, data-theme="a" should apply a particular colour swatch css to the element in question.

Where am I going wrong?

Does jQuery mobile parse the html and style it accordingly after it's rendered? If it is it would need to re-parse an element if it's added after the dom is loaded. I'm not sure this is the case just curious. — jeschafe, Jul 10 '12 at 14:59
Sounds like that might be along the write lines but I too do not know how to do that. — user1202278, Jul 10 '12 at 15:10
When are you performing the append? I would try appending before any other JS code and see if this works. — Etienne Dupuis, Jul 10 '12 at 14:58
@user1202278 Use $(document).bind('pageinit'), not $(document).ready() http://jquerymobile.com/demos/1.1.0/docs/api/events.html — Phill Pafford, Jul 10 '12 at 15:30

score 5 · Accepted Answer · answered Jul 10 '12 at 15:24

5

 $('.block').append(' <a onclick="deleteThis()" data-role="button" data-theme="a"> Text</a>').trigger( "create" );

answered Jul 10 '12 at 15:24

user1202278

774
2
10
24

score 0 · Answer 2 · answered Jul 10 '12 at 16:01

You can use the .buttonMarkup() method supplied by jQuery Mobile. This method allows you to pass some optional parameters as well.

Here are the docs for the .buttonMarkup() method: http://jquerymobile.com/demos/1.1.0/docs/buttons/buttons-options.html

Here is an example of using this method to create a button:

$('<a href="#" />').text('New Button').buttonMarkup({
    theme  : 'a',
    icon   : 'star',
    mini   : false,
    inline : false
});
//these are just a few of the options

Here is a demo: http://jsfiddle.net/jasper/6BF6M/

Also, might I suggest using jQuery to make your event bindings, something like:

$('.block').append(
    $('<a href="#" />').text('New Button').buttonMarkup().bind('click', deleteThis)
);

Th0rndike · Answer 3 · 2012-07-10T15:28:18.483

-1

try triggering the refresh event, for a page:

$('#pageId').trigger('pagecreate');

if it's a listview:

$('#listId').listview('refresh');

edited Jul 10 '12 at 15:28

answered Jul 10 '12 at 15:06

Th0rndike

3,406
3
22
42

Thanks, I've tried that with no success unfortunately – user1202278 Jul 10 '12 at 15:10
what's the structure of your html? – Th0rndike Jul 10 '12 at 15:10
I've got a simple mobile layout on the go. Onload of the page I have javascript querying an external api to retrieve some information to then display in a series of links styled like buttons. The data retrieval from the api works fine and is appended fine just with no styling. – user1202278 Jul 10 '12 at 15:14
@user1202278 are you sure? i just tried this, and theme was applied to the dinamically created button. Just call ('pagecreate') after the append – Th0rndike Jul 10 '12 at 15:28
Yup, but calling .trigger( "create" ) after the append worked fine – user1202278 Jul 10 '12 at 15:29

JQuery Mobile Append new Buttons not behaving as expected

3 Answers3