jQuery UI 对话框剥离表单属性和非表单元素

Question

Got an issue I'm not sure how to solve with jQuery. I've been using the jQuery UI library to make a popup with a form on it.

However the jQuery code that controls the submission of the form can't find the form because of what looks like jQuery UI Dialog is removing all the attributes from the actual form upon dialog creation.

Here is a simplified version of the popup:

And turning it into a dialog box with jQuery is done as follows:

 $("#dialog").dialog({ autoOpen: false, show: { effect: "fade", duration: 250 }, hide: { effect: "fade", duration: 250 }, draggable: false, resizable: false, width: calculatedSize, dialogClass: 'fixed-dialog', closeOnEscape: true, modal: true });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="dialog" class="about-dialog"> <div class="dialog-bg-container"> <div class="header-row"> <button id="close-button" class="dialog-close">X</button> </div> <form id="popup-form" action="api/email.php"> <input id="popup-email" class="email-input spacing-3" type="email" placeholder="Your email here" required><input id="popup-submit" class="submit-button spacing-3" type="submit" value="Sign me up!"> <div id="popup-form-alert" class="spacing-1"></div> </form> </div> </div>

Upon inspecting the code with Chrome's tools, I can see that the "id" and "action" attributes of the form are removed, as well as the div with the id of "popup-form-alert". If I comment out the jQuery UI code above, my form is left in-tact with no issues.

One thing to keep in mind is that I do not want to use a standard jQuery UI Dialog Form as shown on their docs ( https://jqueryui.com/dialog/#modal-form ) as I need to have a custom submit button placed where I want it to be.

Does anyone have any suggestions on how to stop jQuery stripping my form?

Many thanks!

Answer 1

After more investigation, I discovered that a duplicate dialog form was the cause of the issue. Upon commenting out the duplicate, the jQuery UI Dialog would preserve my form attributes.

I'm still unsure as to why jQuery UI decides to strip the tags and would be interested in an explanation of this if anyone is able to!