jquery event handlers on a page with angular.js?

Question

We have a page running with angular.js, and has some ng-scope classes and ng-click attributes on various <tr> elements.

We would like to use something like greasemonkey to add functionality to the page after the fact. Specficially, on some <td> elements we want to append text on either a click or mouse enter.

I've tried using click and mouseenter event handlers with jQuery and nothing appears to fire. (Attaching to a <div>'s mouseenter and click handlers does fire them however.)

My knowledge of angular is limited and I'm not sure if attaching an ng-click attribute to an element interferes with adding jQuery handlers to other elements within it? If so, could I add to the ng-click handlers in some way? If so, how?

I would suggest delegating events off of document in this case. — user400654
– user400654, Commented Aug 1, 2014 at 22:53

Timeout · Accepted Answer · 2014-08-01 22:55:05Z

1

I'm guessing it's an order of events type issue since you're probably loading elements dynamically on the page.

Likely your jQuery click logic is executing on the page before the elements really exist.

Try, for example sake, attaching your event to the document so that all future matching elements get the event.

$(document).on("click", "#yourSelector", function(){
    // Do something.
});

answered Aug 1, 2014 at 22:55

Timeout

7,93928 silver badges39 bronze badges

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

1 Comment

larryq Over a year ago

That did the job. This page has a hefty load time --you can feel the processing as it draws graphs-- etc, so I think you're correct. Thanks!

Collectives™ on Stack Overflow

jquery event handlers on a page with angular.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related