Use navbar buttons as toggle buttons in jQuery Mobile

Use navbar buttons as toggle buttons in jQuery Mobile

Hi guys,
I'm trying to use footer navbar buttons as toggle buttons in jQuery Mobile 1.2.0, but I have a problem on Safari Mobile.

This is the HTML code for my buttons.
  1. <div data-role="navbar" class="navbar" data-grid="b">
  2. <ul>
  3. <li><a href="#" id="navbar-1" data-icon="custom">Navbar 1</a></li>
  4. <li><a href="#" id="navbar-2" data-icon="custom">Navbar 2</a></li>
  5. <li><a href="#" id="navbar-3" data-icon="custom">Navbar 3</a></li>
  6. </ul>
  7. </div>

And this is the JavaScript code I use to simulate toggle feature.
  1. var toggle1 = false;

  3. $("#navbar-1").on("click", function () {
  4. if (toggle1) {
  5. $("#navbar-1").removeClass("ui-btn-active");
  6. }
  7. else {
  8. $("#navbar-1").addClass("ui-btn-active");
  9. }
  10. toggle1 = !toggle1;
  11. return false;
  12. });

  14. [Repeat for navbar-2 and navbar-3]

This works correctly on Safari, Chrome and Firefox.
Every button is "independent" and the click action works like a toggle.

But on Safari Mobile, if I click on a button, it automatically deactivates all the other.

How do I prevent this default behaviour on Safari Mobile?
Thanks.