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?

Probably something to do with the DOM not being ready at time of binding, BUT, you should put all dom manipulation into directives!!!!! — tymeJV
– tymeJV, Commented Sep 18, 2013 at 15:36
This is a simplified case, in actuality it's a javascript file that is called in the index.html that wants to handle the navigation menu. — Adam K Dean
– Adam K Dean, Commented Sep 18, 2013 at 15:37
I was, I just simplified my example. It was a directive that wasn't firing js events. — Adam K Dean
– Adam K Dean, Commented Sep 19, 2013 at 8:46

CodingIntrigue · Accepted Answer · 2013-09-18 15:37:46Z

101

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.

answered Sep 18, 2013 at 15:37

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Adam K Dean Over a year ago

This works, thanks. Looks like the bootstrap theme I'm using wasn't designed for Angular. I reckon I can upgrade it with this though. Thank you!

CodingIntrigue Over a year ago

No problem. The $(document) selector is just an example, it's better if you bind onto a parent element of .clickme - obviously one that isn't also generated by Angular :)

Adam K Dean Over a year ago

Thanks, I bound it to the smallest parent that was inside index.html, all working now. Marked as answer. Thanks again!

Thirumalai murugan Over a year ago

Works partially for me but the delegate event is not firing in first click, could you help me on this?

Antonio Ooi Over a year ago

Not working for me: $(".bordered-button-red .show-guide-button").on("click", function () { alert("Clicked!"); });

Collectives™ on Stack Overflow

jQuery click events not firing within AngularJS templates

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related