jQuery selector targeting element with id AND class does not work

Question

I have the following event-handling function:

jQuery(document).on('click', '#button .submitb', function(e){alert();});

jQuery IS included in the html document. But, if I click on a <div id="button" class="submitb">Go!</div> nothing happens. I don't even get an error in the chrome-console.

Answer 1

If you want to target the same element, then you cannot have a space between selectors, that would mean .submitb descendent of #button.

And since the element has ID you just actually need the id selector:

jQuery(document).on('click', '#button', function(e){alert();});

EDIT:

You cannot have multiple buttons with same ID!! then you should use just the class. Or give them different ID-ending like _0, _1 and target with [id^=button]

Answer 2

.submitb is not a descendant of #button to target it with jquery just use the id `#button'

like this

jQuery(document).on('click', '#button', function(e){alert();});

If you want to target a div id with that class aswell you can you just move the space.

like this

jQuery(document).on('click', '#button.submitb', function(e){alert();});