使表单与 jQuery 移动弹出窗口一起使用

Question

所以我有一个正在处理的项目，其中 form 占据了我页面上的整个 data-role="content" 部分。我在内容部分有一个 input。我的内容部分中还有一个 jQuery 移动弹出窗口，上面有一个 input。我正在尝试使用一种表单提交来从内容部分的输入和弹出窗口内部的输入收集数据。

在 DOM 加载之前，原始 HTML 看起来是正确的，然后我注意到 jQuery Mobile 将弹出窗口移到了内容部分之外。这使得当我提交表单时，弹出窗口中的输入不会与 post 请求一起发送。它只发送来自我的内容部分中第一个输入的输入数据。

我看到了一些可能的修复方法，但是它们似乎不适用于示例中的 jQuery 移动面板。

有没有人运行遇到过这种情况？有解决办法吗？

这是我的代码和一个有点工作的例子：

JSfiddle（无法弄清楚如何 post JSfiddle 上的数据）

<div data-role="page" id="page1">

<div data-role="panel" id="mypanel" data-display="reveal" data-position="right">
    <form action="index.php" method="get" data-ajax='false'>
        <label for="filter1">filter1:</label>
        <input type="text" name="filter1"/> 
        <input type="submit" value="Search">
    </form>
</div><!-- end panel -->    

<div data-role="header">
  <h1>Sample Title</h1>
  <a href="#mypanel" id="#togglePanel" data-role="button" data-inline="true" class="ui-btn-right">Filter Results</a>
</div><!-- end header -->

<div data-role="content">

<div id='submitResult'></div> <!-- results will show here but only captures the data from val1 -->

<form id='test'>

    <label for="val1">Value 1:</label>
    <input type="text" name="val1"/>


    <a href="#popup" data-rel="popup" data-role="button" data-inline="true">Show Popup</a>

    <div data-role='popup' id='popup' data-history='false'>         
        <label for="val2">Value 2:</label>
        <input type="text" name="val2"/>
        <input id='sendNow' type='submit' value='Submit'/>

        <div id='submitResult'></div> <!-- results will not show here at all -->
    </div><!-- end popup -->

</form>

</div><!-- end content -->

<div data-role="footer">

</div><!-- end footer -->
</div><!-- end page -->

Answer 1

为可能遇到此问题的任何人解决。因此，当我序列化我的数据时，我只需要序列化弹出窗口中的各个输入，而不是尝试序列化整个表单。这是因为无论我尝试什么，框架似乎都会去除我放入弹出窗口中的任何 <form> 标签。

像这样：

$.post('processVal1andVal2.php', $('#test, input[name='val2']').serialize(), function(data) {

使表单与 jQuery 移动弹出窗口一起使用

Getting form to work with jQuery Mobile popups

jquery

jquery-mobile

popup

jquery-post