Question

我发现我的网站存在问题，我已将其隔离到Jquery Mobile组件。我只是单击调用另一个PHP页面的href链接。在第二页上，我设置了一个表单和一个Jquery表单验证，检查是否已选择SKU按钮，如果是，则应返回警报并取消表单提交。问题是，当我从第一页链接到第二页时，表单验证代码无法正常工作。

如果我刷新页面就可以了。我将链接分离到Jquery Mobile，页面工作得很好。 Jquery Mobile正在传递一些内容，使页面不会完全加载。或者，更可能的是，第一页上有一些残留物会禁用第二页上的验证码。

我可以补充一点，如果我完全在第二页上删除了到Jquery Mobile的链接（根本没有样式），并且我从第一页链接到第二页，那么Jquery Mobile格式仍然会进入第二页。我已经对此进行了广泛的调查，我找不到任何先前提到的这个问题。我已经设置了测试页来对其进行排序。

第1页：

<html lang="en">
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" >
  <title>Customer Maintenance</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">     </script>

 </head>
 <body> 

Test 1 page
<p><a href="test1.html">Home Page</a></p><hr>
  <footer>Created by: attentionjay</footer>
 </body>
 </html>

<a href="test2.php" >Test Inventory</a>

第2页：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" >
  <title>Customer Maintenance</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  <script>
  $(function () {
          $('#custalert').bind('submit', function (e) {
              if($("input:first").val() == "") {
              alert("You must enter a Customer Alert");
              return false;
             }
        });
    });
  $(function () {
          $('#queryinv').bind('submit', function (e) {
              if($('#sku_checkbox').is(':checked') == true) {
             alert("You must enter a SKU");
             return false;
            }
        });
    });    

</script>
 </head>
 <body> 
 <div data-theme='a' > 
    <div style="padding:10px 20px;">
        <form action="inventory_inquiry.php" method="get" id="queryinv" >           
         <h3>Enter SKU</h3>
         <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
          <legend>Choose Input Type:</legend>
          <input type="radio" data-theme="a" name="input" id="sku_checkbox" />
          <label for="sku_checkbox">SKU</label>
          <input type="radio" data-theme="a" name="input" id="entire_checkbox" />
          <label for="entire_checkbox">Entire Inventory</label>
         </fieldset>

            <label for="sku" class="ui-hidden-accessible">SKU:</label>
            <input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
            <input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
            <button type="submit" data-theme="b">Submit</button>
        </form>    
    </div>
</div> 
  <br>
 <p><a href="test1.html">Home Page</a></p><hr>
  <footer>Created by: attentionjay</footer>
 </body>
 </html>

我能得到的任何帮助都会很棒。这对我来说是一个谜。

编辑：7-1-2013 我认为在解决这个问题时更新我发现的内容是值得的。禁用AJAX数据有效，但仅适用于链接。我很难让它在表单提交上工作。我最终使用以下脚本禁用全局AJAX：

<script>$(document).bind("mobileinit", function(){
  $.mobile.ajaxEnabled = false;
 });</script>

此脚本必须放在页面上的Jquery Mobile脚本之前。这将禁用整个页面的AJAX功能。 AJAX很棒，应尽可能使用它。在我发现问题之前，我已经设置了网站的布局。可以更轻松地对站点进行改造以利用Jquery Mobile功能。

Answer 1

每当您链接到单独的php或html页面时，请尝试将data-ajax="false"添加到<a>标记。

jQuery mobile专为开发人员设计，可以在同一个html或php文件中放置多个页面。所以它使用ajax链接那些真正只是div的'页面'。这个问题是，默认情况下，除非另有说明，否则jQuery mobile会为每个链接使用ajax。这可能会产生一些棘手的问题，我第一次开始使用jQuery mobile时花了一些时间来理解它。我认为在JQM文档中有一个关于这个主题的非常好的文档。

Answer 2

添加 rel =“外部” 适合我

Jquery Mobile将未知参数传递给页面

2 个答案: