Programmatically triggering a 'click' events does not work inside ng-repeate, when using external jQuery library

[smlz]

When

• using the full jQuery library inside Angular.js (as opposed to the built-in jQLite lib)
• and triggering a 'click' event on a radio button inside a ng-repeate programmatically with jQuery

the model does not get updated, even though the effects of selecting the radio button are visible on the screen,.

However,

• manually clicking on the radio button
• or programmatically triggering the 'click'-event twice ($('input[name=test]').trigger('click').trigger('click'))

does give the expected results.

For full demo of the problem see the following jsfiddle: http://jsfiddle.net/MpyFW/8/

Being able to programmatically trigger events would be quite usefull for automated testing.

[smlz]

This issue might be related to #1574.

[Narretz]

While it's definitely weird, I don't think it's something that should necessarily be possible, as angular always drives the view from the model (or from real input). For testing, there's always browserTrigger

[alpha1125]

The smlz jsfiddle is using 1.1.1

Problem still exists with 1.2.19.

[caitp]

@kbdaitch I'm pretty sure this is your problem. (so basically, add an href)

[caitp]

the empty string is falsy --- you'd need something like # instead.

[charandas]

I tried with the # as the value, but no success with programmatically getting it.

Wonder if there are directive priorities at play? My ngClick is in a directive. Its basically a num keypad directive:

<div id="keypad" class="large-5 columns large-centered">
    <ul class="large-block-grid-3">
        <li><a ng-click="appendValue('1')" ng-disabled="disabled" class="button expand" href="#">1</a></li>
        <li><a ng-click="appendValue('2')" ng-disabled="disabled" class="button expand" href="#">2</a></li>
        <li><a ng-click="appendValue('3')" ng-disabled="disabled" class="button expand" href="#">3</a></li>
        ... omitted ...
        <li><a ng-click="backspace()" ng-disabled="disabled" class="button secondary expand" id="delete" href="#"><i class="fa fa-long-arrow-left"></i></a></li>
        <li><a ng-click="appendValue('0')" ng-disabled="disabled" class="button expand" href="#">0</a></li>
    </ul>
</div>

Also, I don't want the links to take the user to the application homepage: should I be using a preventDefault() somewhere?

[caitp]

maybe I'm not understanding what you're actually trying to do.

It sounded like you were saying you need to follow links, but your ng-clicks wouldn't work (this would happen if you were missing an href, because of the preventDefault() in the anchor directive).

What exactly do you mean by "programmatically getting it"

[gkalpak]

I believe @kbdaitch is using <a>s as action-buttons (so they shouldn't get the user on anywhere).
If I understand correctly the problem is that the ng-click action is not executed when programmatically triggering a click using jQuery.

It is not clear how that programmatic clicking is implemented, so a reproduction would be useful (e.g. in a plunkr or fiddle), or at least the "clicking" part of the code.

[gkalpak]

@kbdaitch: It basically seems to work for me (without adding any href), so we need more context.
Feel free to use this fiddle as base.

[charandas]

@gkalpak Thanks. Your fiddle helped me quickly test whether the click would work with a directive in the mix as well. It does work well. My problem was arising due to $(document.elementFromPoint(rect.left, rect.top)).click(); not using the correct rect. elementFromPoint won't return me the element consistently from a rect that was generated from element.getBoundingClientRect().

It return the <a> for key 8 but <li> for key 2. I will stop commenting on this thread for now since programmatic ngClick is working fine.

[gkalpak]

That's great ! BTW, it is usually preferable to place your click listeners on the <li>s (maybe that solves the elementFromPoint issue is your particular case as well).

[gkalpak]

Regarding the original issue:
It is still reproducible on 1.3.5 and not related to ngRepeat (afaict).
I was able to reproduce it with "hard-coded" radios.

[jthibeaux]

I have noticed this problem in 1.2.28 (not ready to upgrade to 1.3) when running specs under Chrome 40 (have not tried elsewhere yet). Resolving by simply clicking twice:

element.find('input[type=radio][value=1]').click().click()

This seems to be a problem unique to radio, as a similar checkbox control works fine with one click().

[eknuth]

We are seeing this issue with checkboxes in 1.3.14. We weren't seeing it in 1.2.18. These are checkboxes with an ng-change.

[cadilhac]

FYI, I also get this issue. It concerns only radio buttons since I checked that it works well with checkboxes. I'm using angular 1.3.14. I think this was working with angular 1.2.x but not sure.
Calling click() twice fixes the issue (this is called from a jquery 'on' handler).

[Narretz]

The problem is that after trigger is executed, the checked property is not yet set inside the click callback of the radio.

[mastepan]

Similar issue is there with checkbox.

• If I element.trigger('click') once, checkbox state is visually changed but model doesn't change accordingly.
• If I "click" twice, model uptates after 2nd click but the checkbox is in it's initial state unlike radiobutton.
• If I "click" 3 times, model is updated and the checkbox has proper state

But If I want to click (as it was clicked by user (not speaking of 3times triggering click in code)) the checkbox once, then check something and then click it 2nd time, this serie of 3 click triggerings behaves probably as if The click has been triggered 6 times and that doesn't give desired result.

[Narretz]

I cannot reproduce the original issue in 1.3.0 and above, see http://plnkr.co/edit/1wE6wrCAZ9wwPryIElep?p=preview
I also saw no issues with checkbox

Any other issues mentioned in this thread must be different from the original issue. If there are still issues, please open a new issue with a repro.