0

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?

randombits
  • 47,058
  • 76
  • 251
  • 433
  • 1
    Well - which is it? Removing Bootstrap? Or removing wow? (That will tell you more about where the problem comes in. I strongly suspect it's the wow). – random_user_name Feb 13 '16 at 01:20
  • Is your javascript running before the DOM is loaded? Wrap your click handler in `$(function() { ...your code... });` – Rob M. Feb 13 '16 at 01:24
  • I should have specified that, it's already wrapped in `$(document).ready(), I'll edit to reflect – randombits Feb 13 '16 at 01:26
  • 1
    This *should* work so I'm guessing it's an error elsewhere. Maybe a simple syntax error. Post your actual code? – Will Feb 13 '16 at 01:31
  • 3
    No way to answer this without knowing what `wow` is used for or what scripts do to it. Sounds like the inner html is being modified and replaced as html which would remove existing event listeners – charlietfl Feb 13 '16 at 01:31
  • 1
    I think charlietfl nailed it, can you try `$(document).on('click', '#clickme', function(){ alert("test"); });` ? – Wesley Smith Feb 13 '16 at 01:33
  • @charlietfl I'm guessing that's what's happening also. I figured using some kind of `live` event binder might resolve that. but alas not. I'll just have to repost with more code. – randombits Feb 13 '16 at 01:33

1 Answers1

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");
});
charlietfl
  • 170,828
  • 13
  • 121
  • 150