0

我试图让一个函数在每次 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 的图像，如果是，则将其删除.

4

3 回答 3

2

如果您想在每次显示页面时（第一次或后续访问）都做一些事情，那么我建议使用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()是新的风格。

于 2012-12-03T21:59:15.277 回答
1

您可能想要使用该pageshow事件，您也可能想要使用.on而不是.liveas .liveis depreciated，

例如

$(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 时会触发该事件。

于 2012-12-03T21:58:59.447 回答
0

页面加载事件

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

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

于 2012-12-04T01:37:12.803 回答