javascript - jquery mobile button text switching between two text via click -

i have issue jquery mobile , button text switch.

the button text should change everytime sie button clicked. working 1 time only. click button, text , backgound changes, second time click nothing happens. here ist code:

button declaration:

<div data-role="header">     <div data-role="navbar">       <ul>         <li><a href="#" id="lock" class="lockaction" >lock</a></li>       </ul>     </div>   </div> 

and here function have:

$(".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();      }); 

maybe can me it.

it fails bacause id "lock". check text in element instead.

try this:

$(".lockaction").click(function(e) {       e.preventdefault();      if ($(this).text() === "lock" ) {         $(this).text("unlock");         $(this).css("background-color", "red");     } else {         $(this).text("lock");         $(this).css("background-color", "white");     }      postupdate();  }); 

fiddle.