jQuery click events not firing within AngularJS templates

Question

This may be a bit of strange case where nobody has ever experienced this before, but I'm posting this on the off-chance that somebody knows something I don't.

I'm using jQuery 2.0.3 and AngularJS.

If I have an anchor in index.html like so:

# index.html
<a href="#" class="clickme">Click Me</a>

<script type="text/javascript">
$(function() {
    $('.clickme').click(function() { console.log("click"); });
});
</script>

Then it works, and when I click it, it outputs 'click'. But when I put that inside a template that I include with the ng-include attribute, the jQuery all of a sudden doesn't fire. If I place the script inside the template with the anchor though, it DOES fire.

# index.html
<div ng-include="'path/to/template.html'"></div>

# template.html
<a href="#" class="clickme">Click Me</a>

<script type="text/javascript">
$(function() {
    $('.clickme').click(function() { console.log("click"); });
});
</script>

This is also the case with using directives which use templates. It's bizarre and causing me a lot of hassle with some drop down menus.

Does anyone know why this is happening?

question from:https://stackoverflow.com/questions/18876537/jquery-click-events-not-firing-within-angularjs-templates

Answer 1

Since your clickme probably isn't available on DOM ready - rather it is pushed into the DOM by Angular when it loads template.html - you need to use jQuery's event delegation instead of using .click:

$(document).on("click", ".clickme", function() {
  console.log("click");
});

This will ensure jQuery binds onto the document, then monitors for any click events on elements with the clickme class.