jQuery click event not working in mobile Firefox

Question

I have a navigation menu that shows and hides on mobile devices when an element is clicked. It works everywhere except in Firefox on Samsung Galaxy 3. Here's the HTML:

<nav id="nav" role="navigation">
  <ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
  Etc . .
  </ul>
 </nav>
 <div id="nav-arrow">&#9660;</div>

The element with the click event attached is "nav-arrow". Here is the jQuery:

$("#nav-arrow").click(function() {
        if ($("#nav").is(":visible")) {
            $("#nav").slideUp(800, function() {
                $("#nav-arrow").html("▼");
            }); 
        } else {
            $("#nav").slideDown(800, function() {
                $("#nav-arrow").html("▲");
            });             
        }
    });

The container is has a property of display:none until the nav-arrow is clicked. Can anyone help me get this working on Mobile Firefox?

Answer 1

jQuery Mobile requires the "delegate" method:

$(document).delegate('#nav-arrow', 'click', function () {
    if ($("#nav").is(":visible"))
    {
        $("#nav").slideUp(800, function()
        {
            $("#nav-arrow").html("▼");
        }); 
    }
    else
    {
        $("#nav").slideDown(800, function()
        {
            $("#nav-arrow").html("▲");
        });
    }    
});