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!

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!

• javascript
• jquery
• html
• css

• 1 can you check for errors also create a demo? – guradio Commented Sep 2, 2017 at 14:45
• 1 What is the role of subsystem? Add subsystem CSS please – haMzox Commented Sep 2, 2017 at 14:45
• 1 Did you include the jquery library? – Dekel Commented Sep 2, 2017 at 14:46
• 1 working jsfiddle/78k8dkq5 – Madhawa Priyashantha Commented Sep 2, 2017 at 14:46
• 1 Whats your jquery version? .on was introduced since 1.7 – Alex Shchur Commented Sep 2, 2017 at 15:25

5 Answers 5

Try it:

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

and if you use chrome, clear your browser cache.

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./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>

In the stylesheet, change it to:

.subsystem.subhide {
display: none;
}

.subsystem {
display: anything;
}

It should work

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./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!

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

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