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?

Answer 1

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