Question

Could you try this simple example and tell me what’s going wrong: http://jsfiddle.net/ca11111/unQWP/1/. The li theme is changed, but the listview refresh cannot update it.

The same problem occurs if I want to update the right button theme: http://jsfiddle.net/ca11111/unQWP/2/. I get the error:

Uncaught TypeError: Cannot call method 'removeClass' of undefined

=================================================

Can I know why this ALMOST work but doesnt.., (need 2 click, to change, and can’t get back)

http://jsfiddle.net/ca11111/unQWP/5/

it should toggle theme

Answer 1

You can accomplish what you want by using the code here: http://jsfiddle.net/kE8GJ/. Note that the most important part of the code is this conditional:

var element;

if ($(this).hasClass("ui-li-link-alt")) {
    element = $(this);
}
else {
    element = $(this).closest('li.ui-li');
}

element
    .removeClass("ui-btn-up-c ui-btn-hover-c")
    .addClass("ui-btn-hover-e")
    .attr("data-theme", "e");

This will correctly set the theme on either the li element for the left-side buttons or the a element for the right-side buttons, which ultimately has the effect of applying the new theme to the clicked element, which seems to be your goal.

As for the TypeError that you were seeing, I think it is related to your .button() calls. The elements in jQuery Mobile listviews aren’t typically dealt with as buttons, so such calls may cause problems. All calls like .trigger('create') should be made at the listview level.

---

In response to your edit, you must manually add and remove the classes to successfully toggle the theme. Otherwise, the classes for the old theme will still be present. For example, if you switch from theme e to c, the ui-btn-up-e or ui-btn-hover-e will still be on the li element, so it will appear to not toggle back to theme c. You can see this in action here: http://jsfiddle.net/wu86C/.

The most important code is the second line here (and the equivalent for toggling from c to e):

var li = $(this).closest('li');
li.removeClass("ui-btn-up-e ui-btn-hover-e").addClass("ui-btn-hover-c");