0

jquery モバイルが新しいページをアプリケーションにロードするたびに関数を実行しようとしていますが、現在、コードはページのロードの最初のインスタンスで 1 回しか実行されません。

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

2 つのページ間で何回クリックしても、console.log は 1 回だけ呼び出され、.bottomAd クラスは、クリックされたページの最初のインスタンスでドキュメント全体から削除されます。ページが呼び出されるたびに関数を実行したいので、その特定のページのbottomAd divに「ad」を含むsrcを持つ画像があるかどうか「ページ」がチェックされるたびに、そうであれば削除されます.

4

3 に答える 3

2

ページが表示されるたびに（初回またはその後の訪問のいずれかで）何かに取り組みたい場合は、を使用することをお勧めします。ページが最初に表示されたときpageshowにpageinitのみ起動し、jQueryMobileはページを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()これはjQuery1.7で減価償却されて.on()おり、これが新しいフレーバーであることに注意してください。

于 2012-12-03T21:59:15.277 に答える
1

イベントを使用する可能性があります。また、減価償却の代わりに.onをpageshow使用することもできます。.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に接続されたときに発生します。

于 2012-12-03T21:58:59.447 に答える
0

pageload イベント

"ページが正常にロードされ、DOM に挿入された後にトリガーされます。このイベントにバインドされたコールバックは、2 番目の引数としてデータ オブジェクトが渡されます。"

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

于 2012-12-04T01:37:12.803 に答える