jQuery绑定在同一个元素上

Question

我遇到了jquery的问题

page1.html

<div id="gold">gold value</div>
<!-- NAVIGATE -->
<a href="page2.html">Go to page 2</a>

page2.html

<div id="gold">gold value</div>
<!-- NAVIGATE -->
<a href="page1.html">Go to page 1</a>

main.js

$(document).on('pagebeforeshow',  function () {

   $('#gold').html(100);
});

此代码适用于page1。

当我从第1页的第1页导航到第2页时，是字符串＆＃34;黄金值＆＃34;。

当我像这样更改main.js和page2.html时它才起作用：

$(document).on('pagebeforeshow',  function () {

   $('#gold').html(100);
   $('#gold2').html(100);
});

和 当我改变page2.html

时

div id="gold2"

Answer 1

由于jQuery Mobile的页面加载方法，您可能在某个时间在DOM中有很多页面。

jQuery Mobile使用div元素和属性data-role="page"来表示页面。首先，请确保您的网页具有唯一的id，如果您将网页分隔为多个HTML文件，则无关紧要。

现在您可以访问指定当前活动页面的重复ID元素：

$(document).pagecontainer("getActivePage").find("#gold");

但我确实建议避免重复的ID，即使在不同的页面中也是如此。改为使用class：

<div class="gold">gold value</div>

和

$(".gold").html(100);