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

【问题标题】：Getting a function to run everytime a jquery mobile page is loaded每次加载 jquery 移动页面时都运行一个函数
【发布时间】：2012-12-04 09:37:12
【问题描述】：

我试图在每次 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 类会在页面的第一个实例被点击时被删除。我希望每次调用页面时都运行该函数，因此每次检查“页面”时是否在该特定页面的底部广告 div 中具有包含“广告”的 src 的图像，如果是，则将其删除.

【问题讨论】：

使用pageshow 而不是pageinit
好的。我现在知道了。加载第一页时，它会从两个页面中删除 div .bottomAd，因此，调用第二页时没有带有 img[src*=ad] 的 div。有没有办法让代码只检查为包含 img[src*=ad] 的 div 加载的页面，如果是这样，只从该页面中删除 div？
@JohnHancock 查看我的回答，我对此提出建议。

标签： jquery-mobile

【解决方案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 () {...});

请注意，.live() 在 jQuery 1.7 中已被弃用，.on() 是新版本。

【讨论】：

这非常有效。万分感谢。但是有一个问题：pageshow 仍然在页面转换时显示 div，然后当它完成转换时，div 将被删除。如果 pageinit 在这里不受欢迎，无论如何要防止使用 pageshow 看到这个不需要的 div？
@JohnHancock 以下是您可以使用的所有事件：jquerymobile.com/demos/1.2.0/docs/api/events.html。我想你正在寻找pagebeforechange。
欣赏链接。 pagebeforechange 没有删除 div，但 pagebeforeshow 完成了。再次感谢。

【解决方案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 时会触发该事件。

【讨论】：

【解决方案3】：

页面加载事件

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

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

【讨论】：