Question

我遇到了一个奇怪的问题...当我第一次完全加载页面时：

<script type="text/javascript">
jQuery(function($){
    $("#phone").mask("(999) 999-9999");
});    
</script>

但如果我再次使用“添加”或“删除”按钮尝试POST到同一页面，则上述功能不再起作用。在其他工作中，手机字段将是完美的，并在首次加载页面时进行过滤，但是当您尝试添加更多的俱乐部字段时，手机过滤器将不再有效。为什么电话领域不再被屏蔽，我做错了什么？

<!DOCTYPE html>
<html lang="en">
    <head>

        <!-- Basic Page Needs -->

        <meta charset="utf-8">
        <title>Test Page</title>
        <meta http-equiv="cache-control" content="no-cache"/>
        <!-- Mobile Specific Metas -->

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <!-- css -->
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/framework.css">

        <!-- Scripts -->
        <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="https://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
        <script src="maskedinput.js" type="text/javascript"></script>

        <script type="text/javascript">
        jQuery(function($){
           $("#phone").mask("(999) 999-9999");
        });    
        </script>

    </head>

    <body>
        <div data-role="page">
            <!-- header -->
            <div data-role="header" class="page-header">

            </div>
            <!--/header -->

            <form style="" method="POST">
                <fieldset style="text-align: center;">
                    <label for="phone">Cell Phone</label>
                    <input type="tel" id="phone" style="" value="<?php if(isset($_POST['phone'])) echo $_POST['phone'];?>" name="phone" />


                    <br />
                    <?php

                    if(isset($_POST['add']))
                        $_POST['club_num']++;
                    if(isset($_POST['remove']) && $_POST['club_num'] > 1)
                        $_POST['club_num']--;
                    if(!isset($_POST['club_num']))
                        $_POST['club_num'] = 1;

                    ?>

                    <input type="hidden" value="<?php if(isset($_POST['club_num'])) echo $_POST['club_num'];?>" name="club_num" />
                    <h3 style="font-size: 1.5em; margin-top: 40px;">Are you in a Club?</h3>
                    <?php

                    $count = 0;
                    do {
                        $count++;
                        ?>

                        <label for="clubs<?=$count?>"><?=$count?>. Club</label>

                        <input type='text' id="clubs<?=$count?>" name="clubs<?=$count?>" value="<?php if(isset($_POST['clubs'.$count])) echo $_POST['clubs'.$count];?>" />
                        <?php if($count == $_POST['club_num']){ ?>
                            <div style="text-align: center; display: inline-block;" data-type="horizontal" data-role="controlgroup" data-mini="true">
                                <input data-theme="e" data-icon="plus" type="submit" name="add" value="Add" />
                                <input data-theme="e" data-icon="minus" <?=($_POST['club_num']==1)?'disabled="disabled"':''?> data-iconpos="right" type="submit" name="remove" value="Remove"/>
                            </div>
                        <?php
                        }
                    } while ($count < $_POST['club_num']);
                    ?>
                </fieldset>
            </form>
            <br />

            <!-- footer -->
            <div data-role="footer" class="footer">
                <div class="ui-grid-solo">
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-e" style="height:120px">
                        </div>
                    </div>
                </div>
            </div>
            <!-- /footer -->
        </div>
        <!-- /page -->
    </body>
</html>

Answer 1

当按下其中一个按钮时，将使用AJAX重新加载页面内容。这意味着原始元素'#phone'（你将掩码函数绑定到）将被替换。

我无法看到您从哪里做AJAX请求，但是一旦页面重新加载，您需要再次调用$("#phone").mask("(999) 999-9999");。

Answer 2

我想通过 jd182 回答和 jeroen 评论来解决这个问题，并点击此处链接：http://demos.jquerymobile.com/1.2.0/docs/forms/forms-sample.html

由于它提交的是ajax表单，如jd182所述，并且因为它是移动jquery，所有帖子都会自动发送为ajax帖子。

我所要做的就是改变

<form style="" method="POST">

到

<form style="" method="POST" data-ajax="false">

它修复了问题，因为它定期发布！

谢谢jeroen和jd182！

当我发布到页面时，javascript函数无法正常工作

2 个答案: