getting a deeply nested css element with jquery

Question

hello.

I'm having troubles running an onchange event on a somewhat deeply nested form pulldown.

So basically I have a form with an id of maxResultsForm inside a table with an id of listProductsResults inside another table with an id of listProductsSettings... with an id on the select tag of maxResults

I've tried the below selector and many variations without any success on it triggering.

$("form#maxResultsForm table#listProductsResults td table#listProductsSettings td :select#maxResults").change(function()...

anyone see what I'm doing wrong? thanks in advance!

j

Answer 1

If you have the id just do $('#maxResults').change(...).

Answer 2

$("form#maxResultsForm select#maxResults").change(function()...

Answer 3

You’re getting your CSS selectors backwards. If you had “a form with an id of maxResultsForm inside a table with an id of listProductsResults” then your selector would look like this:

table#listProductsResults form#maxResultsForm

However, as the other answers mentioned, you can’t have two HTML elements on a page with the same value for their ID attribute, as IDs have to be unique. So, if your <select> tag has an ID attribute, you only need to use that to select it.

$('#maxResults').change(function(){...});