Question

我有一个带有表单的php文件。表单操作是另一个php文件。当我提交表单时，下一页（表单操作页面）上的Jquery不起作用。但是当我自己打开那个页面时（不是通过表单动作），Jquery工作得很完美。

首页代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="login.js"></script>
</head>
<body>

<div data-role="page">
    <div data-role="header" id="status">
      <h1>Snacks Bestellen</h1>
    </div>
    <div data-role="main" class="ui-content">
    <form method="post" action="evaluatelogin.php">
      <label for="company">Bedrijfsnummer:</label>
      <input type="text" name="company" id="company">
      <fieldset class="ui-field-contain" id="fieldset_user">
        <label for="user">Gebruiker:</label>
        <select name="user" id="user">
        </select>
      </fieldset>
      <input type="submit" value="Volgende" data-icon="user" data-iconpos="right" data-inline="true">
      </form>
  </div>
</div>

</body>
</html>

evaluatelogin.php页面上的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="getsnacks.js"></script>
</head>
<body>

<div data-role="page">
    <div data-role="header" id="status">
      <h1>Snacks Bestellen</h1>
    </div>
    <div data-role="main" class="ui-content">

        <fieldset class="ui-field-contain" id="snack1">
            <span id="snack1optie1">
            <select name="optie1" id="optie1" class="optie1">
            </select>
            </span>
            <span id="snack1optie2">
            <select name="optie2" id="optie2" class="optie2">
            </select>
            </span>
            <span id="snack1optie3">
            <select name="optie3" id="optie3" class="optie3">
            </select>
            </span>
        </fieldset>
    </div>
</div>

</body>
</html>

页面上的Jquery（只是一个测试）：

$(document).ready(function() {
    $('#snack1optie2').hide();
    $('#snack1optie3').hide();      
    $('#snack1optie1').click(function(){
        $('#snack1optie2').show();
    });
    $('#snack1optie2').click(function(){
        $('#snack1optie3').show();
    });
    $('#snack1optie3').click(function(){
        $('#snack1optie3').hide();
    });
});

提前致谢，

Answer 1

表单提交是使用AJAX执行的。

在提交时，jQuery Mobile将确保能够通过Ajax检索指定的Url，并对其进行适当处理。

使用data-ajax="false"表单属性禁用它，它将正常工作。

<form method="post" action="evaluatelogin.php" data-ajax="false">

jQuery mobile docs

Jquery脚本无法在发送表单的页面上工作

1 个答案: