title: jquery .show() and .hide() not working in safari - adding spinner to <a href
body: <p>I have some very basic code that acts as a loading gif for a webpage:</p>
  
  <p>The loading and content containers sit in my base template. The </p>
  
  <hr>
  
  <pre><code>//header
  
  &lt;a href="{{ url_for('welcome', id=id, profile=profile) }}" onclick="spinner();" class="home"&gt;Home&lt;/a&gt;
  
  //more html
  
  &lt;div id="loading"&gt;
      &lt;img src="/static/images/Loading.gif" class="ajax-loader"&gt;
  &lt;/div&gt;
  
  &lt;div id="content"&gt;
  
      {% block content %}{% endblock %}
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      function spinner() {
          console.log('fire');
          $("#loading").show();
          $("#content").hide();
      }
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>div#loading {
      height: 350px;
      position: relative;
      display: none;
      background: white;
  }
  
  .ajax-loader {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      max-width: 100px;
      margin: auto;
  }
  </code></pre>
  
  <p>My code works perfectly well in firefox and chrome, but not in safari or on ios. </p>
  
  <p>ps. I have checked that my function is working, the console shows 'fire' which i print straight after the onclick(). </p>
  
  <p><strong>Edit</strong></p>
  
  <p>This is the only error in the console:</p>
  
  <p><code>[Error] Failed to load resource: the server responded with a status of 404 (NOT FOUND) (jquery-ui.min.css, line 0)</code> </p>
  
  <p><strong>Update 1</strong></p>
  
  <p>I have added a class to my <code>&lt;a href="url" class="..."</code> and updated my javascript to the following:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function() {
          $( ".spin_click" ).click(function( event ) {
              event.preventDefault();
              console.log('hiding content');
              $(".content").hide();
              console.log('show spinner');
              $(".se-pre-con").show();
              console.log('waiting now...');
          });
      });
  &lt;/script&gt;
  
  #html
  
  &lt;div class="se-pre-con"&gt;&lt;/div&gt;
      &lt;div class="content"&gt;
  
          {% block content %}{% endblock %}
      &lt;/div&gt;
  </code></pre>
  
  <p>I can get safari to show the <code>se-pre-con</code>div when I click on a link, however it completely disables the href link. Is it possible to pursue the link click having executed the .show() command in the jquery? Perhaps I have misunderstood <code>preventDefault();</code> - but I thought it might be able to act as a workaround. <strong>The issue still only exists in safari</strong> </p>
  
  <p><strong>Update 2</strong></p>
  
  <p>As suggested by @maximast, I have decided to use addClass and removeClass. As usual it works in chrome and firefox, but not safari. The code is the same, I have just added a <code>hide</code> class which is added and removed as necessary. </p>
  
  <p>If I use the safari inspector and remove the hide class manually, <strong>the spinner does show up</strong>. When I click on a link in the page to trigger the jquery function, I can see the <code>hide</code> class removed correctly from the <code>div</code>. However, even though the <code>hide</code> class is removed, the spinner does not appear. Perhaps I am missing something obvious here. </p>
  
  <p>Here are the libraries i am using:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>Update 3</strong></p>
  
  <p>Here is a link to a test page. There is a link which puts the app to sleep for 3 seconds giving enough time for the spinner to trigger. The spinner sits in the logo. The test page will show the spinner working in a Chrome and Firefox, but not safari. The implementation with this button is exactly the same as used elsewhere in my app. </p>
  
  <p><a href="http://ec2-54-88-245-245.compute-1.amazonaws.com/spinner-test" rel="nofollow noreferrer">http://ec2-54-88-245-245.compute-1.amazonaws.com/spinner-test</a></p>
  
  <p>I have changed the link in the logo to: <code>&lt;a href='#'</code> which for the first time render the spinner in all three browsers. (progress!). However when you click on the 'Click to trigger spinner.' link, the following happens:</p>
  
  <ol>
  <li>Chrome - spinner works first time.  </li>
  <li>Firefox - spinner works first time, however there were a couple of occasions when I had to click it a second time. </li>
  <li>Safari - no luck.</li>
  </ol>
  
  <p>Here is the flask code with the managing the spinner-test page:</p>
  
  <pre><code>@app.route('/spinner-test', methods=['GET'])
  def spinner():
      return render_template('spinner-test.html')
  
  
  @app.route('/wait', methods=['GET'])
  def wait():
      time.sleep(3)
      return redirect(url_for('spinner'))
  </code></pre>