Why does my jQuery click only work on one page (when using iPhone)?

I have two pages on my site, both using the exact same CSS, the exact same jQuery code, and the exact same HTML (for the navigation at least).

On an iPhone, the first page's hamburger navigation works -- it expands when user touches the hamburger icon and the menu opens. The second page does not work when user touches the hamburger icon. As I said, they're both using the same CSS, jQuery, and HTML.

To get this to work on the first page, I'm using cursor: pointer, as I've read worked for others. And it works, but only on one page.

It works on Chrome and Firefox and in the fiddles I've made. The only place it doesn't work is on an iPhone.

Any ideas what i am doing wrong? I am pulling my hair out over this.

Fiddle of page 1: https://jsfiddle.net/kiddigit/eeq618ku/1/ Fiddle of page 2: https://jsfiddle.net/kiddigit/yLuLe0c2/1/

HTML

<header>
  <h1><a href="header.html">Malt and Mold</h1></a>
  <nav>
    <a href="#" class="hamburger">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </a>
    <ul class="clearfix menu">
      <li><a href="header.html">Home</a></li>
      <li><a href="page3.html">Gift Baskets and Catering</a></li>
      <li><a href="page8.html">Tasting Calendar</a></li>
      <li><a href="page7.html">Membership</a></li>
      <li><a href="page8.html">Special Events</a></li>
      <li><a href="page9.html">Contact</a></li>
    </ul>
  </nav>
</header>

jQuery

$('.hamburger').on('click', function(e) {
  e.preventDefault();
  $('.menu').toggleClass('slide-down');
});

CSS with cursor:pointer added

* {
    cursor: pointer;
}

ul a {
  display: block;
  padding: 10px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: black;
  cursor: pointer;
  text-decoration: none;
}