jQuery Mobile创建新页面div后如何执行自定义js？

Question

So I am using Django 1.3 and jQuery Mobile for a webapp. When trying to create new functionality or override some of jQM's functionality I don't seem to be able to get it to excute some code on page creation. I am still hackish at js, but it seems to be a bigger problem than myself How to execute JavaScript after a page is transitioned with jQuery Mobile

I end up putting js snippets on the page itself which doesn't seem the correct way to handle they work sometimes and sometimes not. I have tried the same commands in the script console of Chrome and the selector and commands seem to work fine.

examples:

Hiding the numeric inputs on on sliders I end up putting this script tag in the template itself, I know this is bad form, but am unsure how to get it to work otherwise:

<script>
    $('#form_div > input').hide();
</script>

Trying to do a similar snippet:

<script>
        console.log("Focus snippet!");
        $('.ui-input-text').blur(function(){
            console.log("focus was changed!");
        });
</script>

yields no results, except the initial console.log, but I can execute through the script console and it works fine.

I saw in this several other posts, but none have seemed to answer the question clearly and I am unsure how how to make this work the right way.

This seemed the closest suggestion, but I was unable to make it work: Jquery mobile: how to execute custom jquery code in page

$(“body”).delegate(“div[data-role*='page']“, “pageshow”, function(){

// Your code here. It is good to check to not run unnecessary code

});

Any suggestions would be greatly appreciated.

Answer 1

Look at the documentation here: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html

$('div').live('pageshow',function(event, ui){
  alert('This page was just hidden: '+ ui.prevPage);
});

$('div').live('pagehide',function(event, ui){
  alert('This page was just shown: '+ ui.nextPage);
});

One small note is that all the javascript executed on any page must go in the base page (like: index.html). If you add javascript for page2.html in page2.html it will not be executed. if you add the javascript for page2.html in index.html it will be executed.