I realize JQM is quirky, but I really am having a hard time wrapping my arms around this issue.

Since JQM enhances markup, I inspected the anchor elements before and after changing the text. They look identical to me, but after changing the text the links no longer work. Perhaps another set of eyes will help.

Before:

After:

Please ignore the data-role="none" - it has been removed.

HTML:

<ul> <li><a href="#home" data-prefetch class="ui-btn ui-icon-home" data-icon="home">Home</a></li> <li><a href="#demo" class="ui-btn ui-state-persist ui-icon-gear" data-icon="gear">Examples</a></li> <li><a href="#documentation" data-prefetch class="ui-btn ui-icon-info" data-icon="info">Documentation</a></li> <li><a href="#contact" class="ui-btn ui-icon-mail" data-icon="mail">Contact</a></li> </ul>

I thought it might be the data-prefetch, but after experimenting it did not turn out to be the case.

jQuery: (used to change the text)

$("ul li a.ui-btn").text(new_text);

The test site is here

Any help is appreciated.