title: <button> JQuery onclick works only once
body: <p>I have a button onclick event that works fine like here: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// create function to remove "popup-open" classes
  // function used in onclick attribute
  (function( $ ){
     $.fn.popupClose = function() {
       $( "body" ).removeClass( "popup-open" )
       $( ".overlay_btn" ).removeClass("popup-open");
        return this;
     }; 
  })( jQuery );
  
  // if a &lt;button&gt; exists
  // onclick read button ID value
  // add "popup-open" class to span with IDvalue as class, with fadein effect
  
  if ( $( "button.popup" ).length )
  {
    $("button.popup").click( function()
      { 
      var btnId = $(this).attr('id');
      $( "body" ).hide().addClass( "popup-open" ).fadeIn(100);
      $( "."+ btnId ).hide().addClass( "popup-open" ).fadeIn(200);
      }
   );
  }
  
  if ( $( "button.link" ).length )
  {
    $("button.link").click( function()
      { 
      var btnFormAction = $(this).attr('formaction');
      var btnTarget = $(this).attr('formtarget');
      //alert(btnFormAction);
      window.open(btnFormAction, btnTarget);
      }
  
   );
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button {
    padding: 10px;
    font-size: 1.5rem;
    background-color: #d5d5d5;
    border: 3px solid #ddd;
    margin: 15px;
    box-shadow: 0px 0px 15px #888888;
    cursor: pointer;
  }
  
  button:hover {
    box-shadow: 0px 0px 10px #888888;
  }
  
  body:after {
      content: "";
      display: none;
      position: fixed; /* could also be absolute */ 
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 10;
    background: rgba(0,0,0,0.6);
  }
  
  .overlay_btn {
    display: none;
    padding: 10px;
      width: 300px;
      height: 200px;
      position: fixed;
      top: 50%; 
      left: 50%;
      margin-top: -100px;
      margin-left: -150px;
      background-color: #fff;
      border-radius: 5px;
      text-align: center;
      z-index: 11; /* 1px higher than the overlay layer */
  }
  
  body.popup-open:after, .popup-open {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
      &lt;!--create a button with unique ID* --&gt;
      &lt;button id="btn-popup01" class="popup"&gt;popup button 1&lt;/button&gt;
      &lt;!-- create a span with the button#IDvalue as class value--&gt;
      &lt;span class="overlay_btn btn-popup01"&gt;&lt;a href="#" onclick="$(this).popupClose();"&gt;close&lt;/a&gt;
      &lt;h3&gt;your content title 1&lt;/h3&gt;
        &lt;p&gt;your content 1&lt;/p&gt;
      &lt;/span&gt;
      
      &lt;!--create a button with unique ID* --&gt;
      &lt;button id="btn-popup02" class="popup"&gt;popup button 2&lt;/button&gt;
      &lt;!-- create a span with the button#IDvalue as class value--&gt;
      &lt;span class="overlay_btn btn-popup02"&gt;&lt;a href="#" onclick="$(this).popupClose();"&gt;close&lt;/a&gt;
      &lt;h3&gt;your content title 2&lt;/h3&gt;
        &lt;p&gt;your content 2&lt;/p&gt;
      &lt;/span&gt;
      
      &lt;!--create a button with unique ID* --&gt;
      &lt;button id="btn-link01" class="link" formaction="http://s.emp.re/1KAZEXZ" formtarget="_blank"&gt;link button 3&lt;/button&gt;
      
      
      &lt;p&gt;Here, you have a JS-less equivalent, but with much more CSS (LESS): &lt;a href="http://codepen.io/maccadb7/pen/nbHEg" target="_blank"&gt;http://codepen.io/maccadb7/pen/nbHEg&lt;/a&gt;&lt;/p&gt;
      
      
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Using the same code in this project: <a href="http://kine.sarabernaert.be/contact/" rel="nofollow">http://kine.sarabernaert.be/contact/</a></p>
  
  <blockquote>
    <p>Button 'Maak Afspraak' gives a popup
    on the popup there's a button 'Ga naar aanmelden' that links to a outside link.</p>
    
    <blockquote>
      <p>I can't get working this link. When click, nothing happens. In my demo setup, same code is working well.</p>
    </blockquote>
  </blockquote>
  
  <p>Any hints? Don't see what I'm doing wrong.</p>
  
  <p>Thx!</p>