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

Question

I've got a really simple form that displays a single field. 我有一个非常简单的表单，只显示一个字段。 When you punch in a value and hit submit, it gives you a list of checkboxes. 当您打入一个值并点击提交时，它会为您提供复选框列表。 You check some and then click another button below and it displays a success/failure message. 您检查了一些，然后单击下面的另一个按钮，它显示成功/失败消息。

I'm trying to convert this to a jQuery mobile app but am having nothing but problems. 我正在尝试将其转换为jQuery移动应用程序，但是除了问题之外什么都没有。 For example, I can pragmatically call a popup using $("#element").popup("open"); 例如，我可以使用$("#element").popup("open");实用地调用弹出窗口$("#element").popup("open"); when the page first loads, but after the post when I call the popup open like above I see the URL change but no popup is visible and it's pretty much the exact same page. 当页面第一次加载时，但是在帖子之后，当我像上面那样调用弹出窗口时，我看到URL发生了变化，但是没有弹出窗口可见，并且页面几乎完全相同。 I also tried just posting the checkboxes to a secondary URL ( /update ) and then use an HTTP redirect back to the original page, but somehow jQuery Mobile is breaking that. 我还尝试过仅将复选框发布到辅助URL（ /update ），然后使用HTTP重定向回到原始页面，但是jQuery Mobile以某种方式打破了这一点。

I've pasted the majority of the code below. 我粘贴了下面的大部分代码。 If anyone can point me in the correct direction, that's all I'm looking for. 如果有人可以指出正确的方向，那就是我想要的。

<!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>

Using the following prevents the click handler from being called twice but I still don't get the actual popup after the initial page load: 使用以下命令可防止两次单击处理程序，但在初始页面加载后仍无法获得实际的弹出窗口：

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

All I'm getting is #&ui-state=dialog added to the URL, and calling $("#button").popup("close"); 我得到的只是将#&ui-state=dialog添加到URL，并调用$("#button").popup("close"); removes that. 删除。

Answer 1

It might be that youre attaching same handler multiple times add 可能是您多次附加了相同的处理程序

    <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 个解决方案

解决方案1
0 2014-05-13 16:17:09

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

问题描述

1 个解决方案

解决方案1 0 2014-05-13 16:17:09

解决方案1
0 2014-05-13 16:17:09