Question

我必须在jquery mobile中有两个页面，并且在每个页面中都有div名为content，在div中我通过ajax将外部页面调用到它中。对于"page1"，通话效果很好，但"page2"通话无效。虽然“page2”中的div与"page1"的名称相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<script language="javascript">

$(document).ready(function() {
    $.ajaxSetup({ cache: false });
    setInterval(function() {
    $('#content').load('total.asp');
    }, 3000); 
    });

</script>

</head>

<body>
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role="content">
    <table width="311" border="0" cellpadding="3" cellspacing="3">
      <tr>
        <td width="77">Content</td>
        <td width="102"><div id="content"></div></td>
        <td width="102"><a href="#page2">Go to Page 2</a></td>
      </tr>
    </table>
  </div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>
<p>&nbsp;
<div data-role="page" id="page2">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div data-role="content">
    <table width="320" border="0" cellpadding="3" cellspacing="3">
      <tr>
        <td width="77">Content</td>
        <td width="102"><div id="content"></div></td>
        <td width="102"><a href="#page1">Go to Page 1</a></td>
      </tr>
    </table>
  </div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>
</p>
</body>
</html>

Answer 1

尝试使用：

$("div").find("[data-role='content']").load('total.asp');

因为您已将其作为数据属性提供。你可以更好地使用类，如果你有多个具有相同名称的id，那么它将是：

$(".content").load('total.asp');

Answer 2

ID必须是唯一的。尝试将id="content"更改为class="content"，然后尝试以下代码

$.ajaxSetup({ cache: false });
    setInterval(function() {
        $('.content').load('total.asp');
    }, 3000); 
});

引用ajax调用多个div

2 个答案: