jquery click not latching onto bootstrap col-md div

Question

I have a div that's simply defined as:

<div class="col-md-4 single-signup wow fadeIn animated" data-wow-offset="10" data-wow-duration="1.5s"> 

In it is some content, such as the following:

<p><a id="clickme" href="#">Please do!</a> click click click.</p>

The problem is, my event handler isn't working at all for this. The event looks like the following:

$(document).ready(function() {
  $('#clickme').click(function(){
    alert("test");
  });
});

Now, what's odd is that when I remove all the bootstrap/wow animations out of the div class, and just have a raw <div></div>, the handler works as expected.

What could possibly be causing the issue here?

Answer 1

If the inner html is being modified then replaced by another plugin then that replacement can remove existing event listeners.

You can use event delegation assuming that your id="clickme" still exists after modification

$(document).on('click', '#clickme', function(){
   alert("test");
});