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);
});

此代码适用于第 1 页。

当我从第 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 移动端的页面加载方式，您可能在某个时间 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);

jQuery Binding on the same element