So I have a table with a bunch of selects and I apply selectMenu to them
and they work great.
Then I have an option for the user to dynamically insert an
additional row, so I have a javascript function that inserts a new
html row with cells and an HTML select inside one of the
cells.
Then I execute the following
javascript to transform the new select into the selectMenu version.
-
$('#dailyblock' + weekdayid + '-' + scheduleid +
'-' + childid).selectmenu({
-
style:'popup',
-
width:200,
-
format:multiLine
-
});
Obviously, the weekdayid, scheduleid and
childid are passed in.
So the weird thing is, that I could have two or more tables on
the same page with the same functionality and this code always
works on the first table but never on subsequent tables.
The HTML is inserted properly, so the row is there with the selects
and everything, but they're just plain HTML selects. No
selectMenu styling is applied even though I've confirmed that the
function is being called.
I thought maybe I had duplicate IDs or something but I looked at
the source code and the id for each select is unique. I also verified
that the select exists in the dom by alerting the object, and it's
there but for some reason the selectMenu is never applied.
There are no javascript errors.
Any ideas how I can debug this, or solve this?