Trigger click programatically on a single element of a list in Angular/JavaScript

Question

I am writing a test where I want to click on say the second item in a list and check that something has changed.

I have a bullet list element:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

I have tried the following (element is the angular element containing the entire list):

var li = element.find('li');

li.triggerHandler('click'); //Clicks all elements
li[1].triggerHandler('click'); //Error: li[1].triggerHandler is not a function

None of these works. The first attempt clicks all items and the second throws an error.

Any ideas how to only trigger click on the second item?

Why aren't you simply binding a click handler to the second element with ng-click? — thomaux
– thomaux, Commented Aug 5, 2015 at 11:30
I am. This is test code where I want to trigger a click on a single element to check that the code in ng-click works as expected. — KMK
– KMK, Commented Aug 5, 2015 at 11:42

Sergiu Paraschiv · Accepted Answer · 2015-08-05 11:56:01Z

5

triggerHandler only works on jQuery (or the builtin jqLite) elements. element.find returns a jQuery element (li) but li[1] is a DOM node, not a jQuery wrapped element. You could use element.find('li:eq(1)') (if you use jQuery) or element.find('li').eq(1) (with the builtin jqLite) instead.

edited Aug 5, 2015 at 11:56

answered Aug 5, 2015 at 11:30

Sergiu Paraschiv

10.2k5 gold badges42 silver badges51 bronze badges

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

2 Comments

KMK Over a year ago

That's exactly what I was looking for. However, I found out that the correct syntax (in my Jasmine/Karma test) is element.find('li').eq(1). Thanks a lot :)

Sergiu Paraschiv Over a year ago

Right, that's because element.find is "Limited to lookups by tag name" in jqLite. Updated the answer with clarifications for this.

Collectives™ on Stack Overflow

Trigger click programatically on a single element of a list in Angular/JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related