Getting a function to run everytime a jquery mobile page is loaded

I\’m trying to get a function to run everytime jquery mobile loads a new page into the application, but currently, the code only gets run once on the first instance of a page loading.

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

No matter how many times you click back and forth between the two pages, the console.log only gets called once, and the .bottomAd class gets removed document wide on the first instance of the page getting clicked on. I\’d like to have the function run everytime the page is called, so each time the \”page\” is checked for having an image with a src that contains \”ad\” in the bottomAd div on that specific page, and then removed if so.

Rating: 2 out of 5 based on 3 ratings

Posts Related to Getting a function to run everytime a jquery mobile page is loaded

• Jul 14th, 2012 html - How to load javascript from parent into child context Saturday AM 11:50:59


• Nov 14th, 2012 javascript - How use jQuery Mobile with RequireJS? Wednesday AM 05:56:21


• Aug 01st, 2012 jquery - Running Javascript after CSS is fully loaded Wednesday AM 02:16:17


• Aug 01st, 2012 jquery - How to call ajax only once Wednesday AM 04:36:46


• Aug 18th, 2012 php - How to refresh a div everytime a database is updated? Saturday PM 13:10:34


• Jul 19th, 2012 html - Javascript function innerHTML not styled correctly Thursday PM 14:05:59


• Jul 12th, 2012 how can i set the default in open/close toggle jquery Thursday PM 15:02:02


• Nov 12th, 2012 jquery - Different Style For the Tab Your On Without Javascript? Monday PM 17:18:12


• Aug 14th, 2012 html - How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad? Tuesday AM 01:13:12


• Aug 15th, 2012 javascript - call a function after complete page load Wednesday AM 06:01:51

The post Getting a function to run everytime a jquery mobile page is loaded appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/getting-a-function-to-run-everytime-a-jquery-mobile-page-is-loaded.html