title: JQuery: How to fire click event on hidden element?
body: <p>I want to create a flashing effect. When user click the flashing element, it will be disappeared. However, it seems not every "user's click" can fire the "click event". Sometimes, when I clicked the flashing element, it didn't disappear. I thought the reason is <strong>a hidden element can not be clicked</strong>. Just like this article says <a href="https://stackoverflow.com/questions/5659563/css-is-a-hidden-object-clickable">CSS: Is a hidden object clickable?</a>. So, is there other methods to make the flashing element disappeared immediately when user clicks the element?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var flashToggle = setInterval(function() {
    $("div").toggle();
  }, 200)
  
  $("div").on("click", function(e) {
    clearInterval(flashToggle);
    $(this).hide();
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div&gt;Flashing element&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>