javascript - 同一元素上的 jQuery 绑定(bind)

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>

主要.js

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

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

此代码适用于 page1。

当我从第 1 页导航到第 2 页时，第 2 页是字符串“gold value”。

只有当我像这样更改 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 使用带有属性 data-role="page" 的 div 元素来表示页面。首先，确保您的页面具有唯一的 id，如果您将页面分隔在多个 HTML 文件中也没关系。

现在您可以访问指定当前事件页面的重复 ID 元素:

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

但我真的建议避免重复的 ID，即使在不同的页面中也是如此。使用 class 代替:

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

和

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