title: jquery mobile data-icon
body: <p>Hi I am having difficulty changing some attributes in jquery mobile dynamically for some reason. I can see that the attributes are being changed in the markup when I call the respective methods I am using but the appearance of the elements does not change. Is there a need to reinitialize a lists etc in Jquery Mobile?</p>
  
  <p>By the way here is some code to show you how I am setting the attributes:</p>
  
  <pre><code>$('.className').each(function(){
      if ($(this).text() == tempLoc){
      console.log('FOUND MATCH WITH tempLoc and ' + $(this).text());
      $(this).attr('data-icon','alert');
      $(this).attr('data-theme','e');
  }
  });
  </code></pre>
  
  <p>As I said this is working in code but the elements don't update or change appearance-wise.
  Any ideas?</p>
  
  <p>UPDATE:
  I have found a way to update the data-icon but it is of course still messy and unnecessarily so. You can access the data-icon using the following method:</p>
  
  <pre><code>$(this).children('div.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-arrow-r');
  $(this).children('div.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-alert');
  </code></pre>
  
  <p>In that case $(this) refers to the button itself and the icon itself is found in it's ui-btn-inner child's span. ui-icon-arrow-r will result. Substitute whatever classes you are using in this case. If anybody knows of a way to refresh the buttons correctly I would appreciate it.</p>