引用 ajax 调用多个 div

Question

我必须在 jquery 移动版中创建两个页面，每个页面中都有一个名为 content 的 div，在 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> 
<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

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

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

Answer 2

尝试使用：

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

因为您已将其作为数据属性提供。你可以更好地使用 class 如果你有多个同名的 id 在这种情况下它将是：

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

引用 ajax 调用多个 div

Referencing ajax calls to multiple divs

html

javascript

ajax

jquery