title: jquery mobile button text switching between two text via click
body: <p>I have an issue with jquery mobile and a button text switch. </p>
  
  <p>The button text should change everytime sie button is clicked. It is working one time only. I click the button, the text and backgound changes, the second time I click it nothing happens. Here ist my code:</p>
  
  <p><strong>Button declaration:</strong></p>
  
  <pre><code>&lt;div data-role="header"&gt;
      &lt;div data-role="navbar"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" id="lock" class="lockaction" &gt;Lock&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>And here the function I have:</strong></p>
  
  <pre><code>$(".lockaction").click(function(e) { 
  
              if (e.target.id == "lock" ) {
  
                  document.getElementById("lock").text = "Unlock";
                  $(this).css("background-color", "red");
  
                  }
  
              else {
  
                  document.getElementById("lock").text = "Lock";
  
                  }
  
          postupdate();
  
      });
  </code></pre>
  
  <p>Maybe someone can help me with it.</p>