Question

我正在尝试每次运行jquery mobile将新页面加载到应用程序时运行一个函数，但是目前，代码只在第一个页面加载实例上运行一次。

HTML：

<div id="pageID" data-role="page" class="content_page">
    <div data-role="header" data-id="bestHeader" data-position="fixed">
        <h1>Header</h1>
    </div><!-- end header -->
    <section data-role="content">
        <h2>Header2</h2>
            <p>Content goes here</p>
    </section>
<div class="bottomAd" data-role="footer" data-position="fixed">
            <img src="ad2.jpg" width="100%">
    </div>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
     <!-- navBar here -->   
        </nav> 
    </div><!-- end footer -->        

</div><!-- end page -->    

  <div id="pageID2" data-role="page" class="content_page">
    <div data-role="header" data-id="bestHeader" data-position="fixed">
        <h1>Header</h1>
    </div><!-- end header -->
    <section data-role="content">
        <h2>Header2</h2>
            <p>Content goes here</p>
    </section>
<div class="bottomAd" data-role="footer" data-position="fixed">
            <img src="ad2.jpg" width="100%">
    </div>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
     <!-- navBar here -->   
        </nav> 
    </div><!-- end footer -->        

</div><!-- end page -->

Javascript

$(".content_page").live('pageinit', function(event) {
    if ($(".bottomAd img[src*=ad]").length >= 1) {
        console.log($(".bottomAd img[src*=ad]").length);
        $(".bottomAd").remove();
    }

无论您在两个页面之间来回点击多少次，console.log只会被调用一次，而.bottomAd类会在点击的第一个页面实例上被删除。我希望每次调用页面时都运行该函数，因此每次检查“页面”是否在该特定页面上的bottomAd div中包含src包含“ad”的图像，然后删除

Answer 1

如果您希望每次显示某个页面时（第一次或后续访问）都要处理某些内容，那么我建议您使用pageshow，pageinit仅在第一次显示页面时触发并且jQuery Mobile有时会在DOM中保留页面。如果您只想在用户第一次访问页面时运行某些代码，请使用pageinit，但将委派的事件处理程序绑定到document元素。

我还会使你的选择器更具体（到当前页面），这样你就不会对那些看不到的页面上的元素进行处理：

...
//`this` refers to the `<data-role="page">` pseudo-page element being bound to
$(this).find(".bottomAd").remove();
..

您的委托事件处理程序应该绑定到DOM中的元素，例如document：

$(".content_page").live('pageinit', function(event) {

应该是

$(document).on('pageinit', '.content_page', function () {...});

请注意，jQuery 1.7中的.live()已弃用，.on()是新的味道。

Answer 2

您可能希望使用pageshow事件，也可能希望使用.on代替.live，因为.live已弃用，

例如

$(document).on('pageshow','.content_page' function(event) {
    if ($(".bottomAd img[src*=ad]").length >= 1) {
        console.log($(".bottomAd img[src*=ad]").length);
        $(".bottomAd").remove();
    }

还有一个pageload事件，但是当外部页面附加到DOM时会触发该事件。

Answer 3

pageload活动

“在页面成功加载并插入DOM后触发。绑定到此事件的回调将作为第二个arg传递给数据对象。”

http://jquerymobile.com/test/docs/api/events.html

每次加载jquery移动页面时都要运行一个函数

3 个答案: