Changing JQuery Mobile data-theme dynamically

Question

I want to map a tap event to a function that changes the data-theme of a specific element in my document. It looks something like this:

$(document).delegate("#item1", "tap", function() { 
        $("#item1").attr("data-theme", "e");
    });

So far, it kind of works correctly. In the source code I can see it changing the attribute. However, it doesn't get re-rendered on the document and everything appears to the stay the same. Do I have to reload the document or is there a way to make it dynamically update?

Possible duplicate [of this question](http://stackoverflow.com/a/8357910/2049063) — omma2289, Jul 09 '13 at 19:19
It depends on that item you want to change. Each widget have a different way. Post your markup. — Omar, Jul 09 '13 at 21:32

score 2 · Answer 1 · answered Jul 10 '13 at 04:52

First use .on and vclick instead of delegate and tap. You can read on vclick here, read on .on here

You need to trigger refresh event, than jquery mobile will apply styling to that element again, for example if you change a list view, you can do this

$("#listview").listview('refresh')

In case you want styling changed on an element that has no refresh event, you can trigger page create event on the whole page, that will refresh everything.

$('#pageid').trigger('create')

Check here to see which elements have refresh event

Changing JQuery Mobile data-theme dynamically

1 Answers1

Linked