How to trigger emulate click ngClick from jQuery

Question

How have a link like

<a href="" ng-click="someAction()">Some text</a>

and I want to invoke ngClickaction from jQuery:

$('a').click()

But it doesn't work: someAction() not invoked. Also didn't work

$('a').trigger('click')

Is it possible to invoke someAction() from jQuery?

im not sure if i understand you, but you can triggering a click with `.trigger('click');` or `.triggerHandler('click');` — Adrian Preuss, Apr 01 '14 at 05:54
why you need to invoke function from jquery , i will suggest to use angular way itself. — Prashobh, Apr 01 '14 at 06:00

score 4 · Accepted Answer · edited Sep 09 '15 at 14:36

4

Nevermind the apply cycles and timeouts, here you are:

$('a').dispatchEvent(new MouseEvent('click', {
 'view': window,
 'bubbles': true,
 'cancelable': true
}));

edited Sep 09 '15 at 14:36

K-G

2,799
4
26
42

answered Apr 01 '14 at 06:02

Vlad Gurovich

8,463
2
27
28

Thanks for you answer, but I need to do it outside angular, I can't change source code, just need to test from jquery – uladzimir Apr 01 '14 at 06:03
You can run those commands from javascript console, so you are essentially outside angular (`angular` is a global variable exposed by AngularJS on a window object) – Vlad Gurovich Apr 01 '14 at 06:07
I have an error `Error: [$rootScope:inprog] $apply already in progress` – uladzimir Apr 01 '14 at 06:13
that means that the angular application was already in the middle of the $digest cycle. were you doing anything else that was causing UI updates? – Vlad Gurovich Apr 01 '14 at 06:16
I added a safer apply – Vlad Gurovich Apr 01 '14 at 06:19
I think, there is a directive, that listens clicking by this link and show some template. is it a problem? – uladzimir Apr 01 '14 at 06:19
hm, again `Error: [$rootScope:inprog] $apply already in progress`. Sorry, I'm new to angular and just want to make click like in jquery – uladzimir Apr 01 '14 at 06:22
so you ran the my latest version that has a phase variable? – Vlad Gurovich Apr 01 '14 at 06:23
>>so you ran the my latest version that has a phase variable? yes – uladzimir Apr 01 '14 at 06:25
I think you may simply need to break out from the $apply cycle, try my new approach – Vlad Gurovich Apr 01 '14 at 06:27
Tried also you last variant, nothing happends – uladzimir Apr 01 '14 at 06:28
Ok, i got it working, for some weird triggerHandler and trigger functions did not work on it, had to get down and dirty and dispatch a mouse event on the element – Vlad Gurovich Apr 01 '14 at 06:55
ok, it works, thanks for your attention and help, angular isn't simple framework :) – uladzimir Apr 01 '14 at 07:33

score 4 · Answer 2 · answered Apr 01 '14 at 06:46

4

I think it's strange that it's not working, I get it working with both

angular.element('a[ng-click="someAction()"]')

and

$('a[ng-click="someAction()"]')

as selectors, and both click() and trigger('click') to fire the clickhandler.

See http://plnkr.co/edit/6VMavwVImXAonSp8xZrI?p=preview (Watch the console)

answered Apr 01 '14 at 06:46

ivarni

17,658
17
76
92

2

Awesome. The first one helped me out after a lot of head scratching. – camden_kid Feb 04 '15 at 13:54

score 1 · Answer 3 · answered Aug 28 '20 at 23:26

1

Worked for me the old way document.querySelector('a.btn.btn-info.showmore.ng-scope').click()

answered Aug 28 '20 at 23:26

Rupesh

2,627
1
28
42

The old good vanilla JS, THANK YOU! – testing_22 Aug 28 '22 at 00:49

score 0 · Answer 4 · answered Apr 01 '14 at 05:51

0

Yes you could, but you should assign an id:

<a id='Button'>SOMETEXT</a>

$("#Button").click(function() {
   alert('clicked');
   someAction();
);

This should fix it.

answered Apr 01 '14 at 05:51

Max Langerak

1,187
8
17

How to trigger emulate click ngClick from jQuery

4 Answers4

Linked