How to change dynamically appearance of a jQM text field

How to change dynamically appearance of a jQM text field

Hello,

I try to change the color of an input box once the user has changed something in it. I can see by alerts that the keypress event was catched but whatever element I try to give trigger('create') command after assigning a different data-theme the input text field is not refreshed with the correct color. Since I have tried various version combinations of jQuery and jQueryMobile without success I think that I do something conceptionally wrong.

In this forum I find several examples with lists, which work fine for me - but I haven't found the answer for the text field so maybe somebody here can point me on where to look at?

My html file:

  1. <script>
  2. $(document).on("pageinit", "#mypage", function () {
  3.     $( "#mytextfield" ).keypress(function() {
  4.         $('#mytextfield').attr( 'data-theme','b');
  5.        
  6.         $("#configpart").trigger("create");
  7.         $('#allpagecontent').trigger("create");
  8.         $('#mypage').trigger("pagecreate");
  9.     });
  10. });
  11. </script>

  13. <div data-role="page" id="mypage">
  14.     <div data-role="content" id="allpagecontent">       
  15.          <div data-role="collapsible" data-collapsed="false" id="configpart">
  16.             <h3>Configuration</h3>
  17.             <form action="#" method="get">
  18.                 <div data-role="fieldcontain">
  19.                     <input type="text" value="" data-mini="true" id="mytextfield" data-theme="a"/>
  20.                 </div>
  21.             </form>
  22.         </div>
  23.     </div>
  24. </div>

Has somebody an idea?

With kind regards,

Steve