Question

function Class() {
    var self=this;
    self.searchfield=$('#search');
    self.resultbox=$('#searchresults');

    self.onSearchFieldChanged=function() {
        console.log("F: "+self.searchfield);
        console.log("R: "+self.resultbox);
    }
    self.searchfield.live("keyup",self.onSearchFieldChanged);
}
var INSTANCE=null;
Class.init=function() {
   INSTANCE=new Class();
}
$(document).bind("globalsloaded", Class.init);

As soon as I type something in #search input, the output on console is as following:

F: undefined
R: undefined

So why are those two variables undefined? They ARE in scope and should contain the corresponding jQuery objects.

Answer 1

After 5 days of work I found the Problem: JQueryMobile

What happens is:

1. deviceready event by phonegap
2. domready event
3. My init is called
4. JQM extracts the input#search element to reinsert it again, surrounded by some style divs
5. The div I saved in my init is no longer valid, as refers to the “old” dom element

Now I am doing my initialization in the pageinit event of JQM. No problems anymore.