div上的jQuery hide（）和show（）无法正常工作

Question

jQuery hide() on button not working, followed then show() of div doesn't appear. Where it was went wrong?

But, it's working fine when internet is turned off. jQuery library was hosted locally.

#loading {
    background: url('/img/loading.gif') no-repeat;
    width: 30px;
    height: 30px;
}

<button id="submit" type="submit" disabled>Submit</button>
<div id="loading" style="display:none"></div>

$(document).ready(function () {
  document.getElementById('submit').disabled = false; // enable the button

  $('#submit').click(function () {
        $(this).removeClass("active"); // either $(this) or $('submit')
        $(this).hide(); // either $(this) or $('submit')
        $('#loading').show();
  });
});

Like said earlier, above code works fine when internet turned off. Also, tried the same with JS display:none and display:block, not working.

https://jsfiddle.net/945ovayj/1/

Answer 1

Make sure that when you make a fiddle, the jQuery library is imported. Instead of giving the div a display:none you can use the .hide() function in jQuery when the document is ready . Here's the fiddle -> https://jsfiddle.net/rr1gwyr7/2/