jQuery click event two elements with same id

Question

I have a jquery click event like so:

$('#header #navigation a').on('click', function() {

I have two elements with the id navigation:

<nav class="navbar navbar-default communities-nav" id="navigation">

and

<nav class="navbar navbar-default" id="navigation" style="position: fixed; top: 0px;">

I only want this onclick event to apply the element without the class communities-nav so I want to apply this onclick event to this element:

<nav class="navbar navbar-default" id="navigation" style="position: fixed; top: 0px;">

Id's are supposed to be unique. Using the same id twice is only going to lead to unexpected behaviour. — m69's been on strike for years, Jul 22 '15 at 19:49
Like m69 mentioned, ids should be unique. If you would like to apply an action or styles to multiple units consider creating a class. If you would not like to use a class perhaps a child selection is the method for you. — Nathan, Jul 22 '15 at 19:55
Since ids are supposed to be **unique** you would not need a selector like this: `'#header #navigation a'` ..... **`'#navigation a'` would be sufficient.** — PeterKA, Jul 22 '15 at 19:55

score 0 · Accepted Answer · edited May 23 '17 at 10:29

Do not use the same id for multiple elements. See Why is it a bad thing to have multiple HTML elements with the same id attribute?
Use classes instead

<nav class="navbar navbar-default communities-nav navigation">

and

<nav class="navbar navbar-default navigation" style="position: fixed; top: 0px;">

You can use :not()

$('#header .navigation:not(.communities-nav) a').on('click', function() {

jQuery click event two elements with same id

1 Answers1