Question

I am using a JQuery mobile plugin and having strange problems with it.

If I use it like below, it works.

    $("#mainPage").on("pageshow", function(e) {

        var availableTags = ['some', 'about', 'tags'];

        $("#searchField").autocomplete({
            target: $('#suggestions'),
            source: availableTags
        });
    });

However if use it like below, it does not work.
But cached is defined in the function and correctly shows the id.
If I redefine cached in the function it works again. Can anyone explain why?

    var cached = $("#searchField");

    $("#mainPage").on("pageshow", function(e) {

        var availableTags = ['some', 'about', 'tags'];

        //Alert says searchField
        alert(cached.attr('id'));

        //If I uncomment below line it works.
        //cached = $("#searchField");

        cached.autocomplete({
            target: $('#suggestions'),
            source: availableTags
        });
    });

Answer 1

This seems to work:
http://jsfiddle.net/9uxtT/
How is it different from your situation ?