Setting focus on dynamically created element

Asked Jan 10 '17 at 20:01

Active Jan 10 '17 at 20:06

Viewed 508 times

I have this code which generates bunch of tabs

<li ng-repeat="nav in navs">
    <a href="" id="{{$index}}" ng-class="{'selected-nav': nav.state === selectedTab}" tabindex="{{nav.state === selectedTab ? 0 : -1}}">
       <span>Some icon</span>
       <span>Some text</span>
    </a>
</li>

Now, i want to navigate through these tabs using arrow keys, I mean i want the focus to move to next element if I use right arrow key and want to move focus to previous element using left arrow key.

I tried this, but it's not gonna work because the elements are generated dynamically, any help??

if(event.which === 39 || event.which === 40) {
document.getElementById('1').focus();
}

Thanks in advance!

edited Jan 10 '17 at 20:06

asked Jan 10 '17 at 20:01

Apple Pie

Try adding `tabindex=0` to the `` to make this element focus-able. – Rahul Desai Jan 10 '17 at 20:03
http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html explains that among other (less relevant) restrictions, tag IDs need to start with a letter. – Daniel Farrell Jan 10 '17 at 20:05
And where do you have that code that listens to an event? – epascarello Jan 10 '17 at 20:06
1

@DanFarrell They can begin with a number... CSS is not found of it, but it works in modern browsers. That is HTML 4 spec, not same in HTML5. – epascarello Jan 10 '17 at 20:07
@epascarello element.bind("keydown", function (event) – Apple Pie Jan 10 '17 at 20:08
Well since you are using angular to set the classes, why are you not just updating the object with which one is selected? – epascarello Jan 10 '17 at 20:10
@epascarello can give me an example please – Apple Pie Jan 10 '17 at 20:12

Setting focus on dynamically created element

0 Answers0