Initially, I set up some dropdown menus to determine which one has been selected and then load the elements with no issues.
However, when I added a new set of dropdowns, my existing function started applying to this one as well because it was too broad.
$(document).on('click', '.dropdown-menu li a', function () {...}
Now, I have these dropdowns on four different tabs in a modal, and I only want the last tab to have different functionality than the other three. Therefore, I need to create a function that works for the original three tabs and another for the fourth type of tab.
IDs for the first three tabs:
#racksTab
#condenserTab
#glycolTab
Fourth tab (different): #alertTab
My question is, why do I get different results when my selector uses multiple IDs compared to just one?
$(document).on('click', '#racksTab,#condenserTab,#glycolTab .dropdown-menu li a', function () {...}
This function gives me https://i.sstatic.net/GRoXV.png
But if I make the selector use only one id, it gets the child node I want.
$(document).on('click', '#racksTab .dropdown-menu li a', function () {...}