Eric G Eric G - 3 months ago 21x
Javascript Question

Multiple ID jQuery Selector returns different than when a single ID selector

So i have some dropdown menus which I have originally setup to figure out which dropdown has been selected then loads the elements, no problems.

Now I've added a new set of dropdowns and my existing function now applies to this one as well because it was very broad

$(document).on('click', '.dropdown-menu li a', function () {...}

Now i have these dropdowns on 4 different tabs in a modal and I only want the last tab to function differently than the other three, so I want to make a function which works for the original 3 tabs and one for the 4th type of tab.

First three tabs IDS


Fourth tab (different)

So my question is why do i get different results when my selector uses multiple IDs compared to just 1

$(document).on('click', '#racksTab,#condenserTab,#glycolTab .dropdown-menu li a', function () {...}

This function gives me
multiple ids selector

But if i make the selector only use one id, it gets the child node i want

$(document).on('click', '#racksTab .dropdown-menu li a', function () {...}

Single ID selector


Because with this selector :

#racksTab,#condenserTab,#glycolTab .dropdown-menu li a

You are targeting three elements:

  1. Element with Id racksTab

  2. Element with Id condenserTab

  3. a element inside li child of .dropdown-menu child of Id element glycolTab

I guess you want all elements like the third one, so your selector must be:

#racksTab .dropdown-menu li a, #condenserTab .dropdown-menu li a, #glycolTab .dropdown-menu li a

Note: Maybe you don't need those selectors at all, I think you can improve your code with a more suitable selector as @j08691 points on the comments, but all will be based on the real markup, if you add it we can help U improve the code.