Dynamically Adding Attributes for jQuery Mobile

Question

I'm adding the attribute data-role="collapsible" to 2 forms here: https://www.myhhf.com/test/test_jq_form.php.

Form 1, at the bottom, is correct. This attribute is being added inline.

Form 2 is incorrect. This attribute is being added dynamically with this line of code inside of $(document).ready(); : $("#form_2").attr("data-role", "collapsible");. I tried adding .trigger("create") to the end, but that did nothing.

Form 2 is receiving the attribute, but it is not working properly.

I do believe that jQuery Mobile applies everything on load. I'm not 100% sure of this. But whether or not this is the case, I need to make this work. I'd be greatful for any help you could provide.

Answer 1

You can turn it into a collapsible by calling $("#form_2").collapsible();. There's no need to add the attribute.