Question

我有一个非常简单的表单，显示一个字段。当您输入一个值并点击提交时，它会为您提供一个复选框列表。您检查一些，然后单击下面的另一个按钮，它会显示成功/失败消息。

我试图将其转换为jQuery移动应用程序，但除了问题之外什么也没有。例如，我可以在页面首次加载时使用$("#element").popup("open");以实用方式调用弹出窗口，但是在我上面打开弹出窗口后，我看到URL更改但没有弹出窗口可见并且它非常漂亮很多完全相同的页面。我还尝试将复选框发布到辅助URL（/update），然后使用HTTP重定向返回到原始页面，但不知何故jQuery Mobile打破了这一点。

我已粘贴下面的大部分代码。如果有人能指出我正确的方向，那就是我所寻找的一切。

<!DOCTYPE html>
<html>
<head>
    <title>Search</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>

    <script type="text/javascript">
    $(document).on("pagecreate", function() {
        $(document).on("click", "#button", function(e) {
            // Do ajax stuff here
            $("#popupBasic").popup("open");
        });           
    });     
    </script>
</head>
<body>
<div id="lookup" data-role="page">
   <div data-role="header">
    <h1>Lookup Order</h1>
    </div>

    <div data-role="content">   
    <?php if (validation_errors()): ?>
    <div class="errors"><?=validation_errors()?></div>
    <?php endif; ?>

    <?php if ($this->session->flashdata('error')): ?>
    <div class="errors"><?=$this->session->flashdata('error')?></div>
    <?php endif; ?>

    <form method="post" id="search_form" action="/search">
    <label for="term">Term:</label>
    <input type="number" data-clear-btn="true" name="term" id="term" value="<?=set_value('term')?>" />  
    <input type="submit" value="Search" />
    </form>


    <?php if (!empty($fish) && $fish->num_rows()): ?>
    <form method="post" action="/update">
    <br /><strong>Species:</strong> <?=$species?><br />
    <hr />
    <a href="#" class="uncheckall">Uncheck All</a> / <a href="#" class="checkall">Check All</a><br />

    <?php foreach ($fish->result_array() as $k => $f): ?>

        <fieldset data-role="fishgroup">
        <?php if (!$f['is_deleted']): ?>
            <input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" />
        <?php else: ?>
            <input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" disabled="disabled" />
        <?php endif; ?>

        <label for="checkbox-<?=$f['id']?>">
            <?php if ($f['type']): ?>
            <?= $f['1'] ?> <?= $f['2'] ?> Attr: <?= $f['3'] ?> Attr: <?= $seat['4'] ?>
            <?php else: ?>
            <?= $f['3'] ?> <?= $f['4'] ?>
            <?php endif; ?>
        </label>
        </fieldset>
    <?php endforeach; ?>
    <a href="#" class="uncheckall">Uncheck All</a> / <a href="#" class="checkall">Check All</a><br /><br />

    <input type="button" value="Update Fish(s)" id="button" />
    </form> 
    <?php endif; ?>

    <div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
    </div>  
    </div> <!-- end content -->
</div><!-- end page -->  

</body>
</html>

使用以下命令可以防止点击处理程序被调用两次，但在初始页面加载后我仍然没有得到实际的弹出窗口：

$(document).off("click").on("click", "#button", function() {
    $(" #popupBasic").popup("open");
});

我收到的所有内容都是#&ui-state=dialog添加到网址中，并且调用$("#button").popup("close");会删除该内容。

Answer 1

可能是您多次添加相同的处理程序添加

    <script type="text/javascript">
$(document).on("pagecreate", function() {
    $("#button").off();
    $(document).on("click", "#button", function(e) {
        // Do ajax stuff here
        $("#popupBasic").popup("open");
    });           
});     
</script>

jQuery Mobile弹出窗口仅适用于初始页面加载

1 个答案: