jQuery-.removeClass不起作用

Question

I have a button <button id="subs1">test</button> and a div

<div class="subsystem subhide">
  <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3>
  <p>Lorem</p>
</div>

In the css file the class .subhide is defined as

.subhide {
 display: none;
}

and the jQuery code that I'm trying to get to work is

jQuery('#subs1').on('click', function(){
jQuery('.subsystem').removeClass('subhide');
});

When clicking the button nothing happens, why is that?

Thanks in advance!

Answer 1

The problem is that jQuery('#subs1') finds elements with that id and binds to them. If elements don't have the id at the time the binding is made, the events will not be handled.

Attach on DOM ready

To solve this issue, wrap the code with on document ready , this way your code will execute only when your dom (document) is ready.

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

A better approach

On the other hand, if your button is dynamically added, it will not be there when the event listener wants to be binded, so the code will practically do nothing. To solve this issue, change your code to the following:

jQuery(document.body).on('click', '#subs1', function() {
    jQuery('.subsystem').removeClass('subhide');
});

This event will be attached to the document.body which is always there in the DOM tree. Now when the body is clicked, the event will propagate to #subs1 regardless of the time the button was attached to the DOM.

Working Snippet

Here is a working example:

 $( document ).ready(function() { jQuery(document.body).on('click', '#subs1', function() { jQuery('.subsystem').removeClass('subhide'); }); jQuery(document.body).on('click', '#subs2', function() { jQuery('.subsystem').addClass('subhide'); }); }); 

 .subhide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="subs1">Unhide</button> <button id="subs2">hide</button> <div class="subsystem subhide"> <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3> <p>Lorem</p> </div> 

Answer 2

 jQuery('#subs1').on('click', function(){ jQuery('.subsystem').removeClass('subhide'); }); jQuery('#toggle').on('click', function(){ jQuery('.subsystem').toggle('subhide'); }); 

 .subhide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="subsystem subhide"> <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3> <p>Lorem</p> </div> <button id="subs1">Button</button> <button id="toggle">Toggle Button</button> 

You need to define button outside of class

Hope this help!

Answer 3

Try it:

    $( document ).ready(function() {
      $('#subs1').on('click', function(){
          $('body').find('.subhide').removeClass('subhide');
      });
   });

and if you use chrome, clear your browser cache.

Answer 4

In the stylesheet, change it to:

.subsystem.subhide {
display: none;
}

.subsystem {
display: anything;
}

It should work

Answer 5

I'm not really sure why, but this snippet works:

jQuery( document ).ready(function() {
 jQuery('#subs1')
  .click(function(){
  jQuery('body').find('.subsystem').addClass('subhide')})
});