javascript - 变量在函数中定义，但需要重新定义

我正在使用JQuery mobile plugin并遇到奇怪的问题。

如果我像下面这样使用它，它将起作用。

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

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

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

但是，如果像下面这样使用它，它将无法正常工作。
但是cached是在函数中定义的，可以正确显示id。
如果我在函数中重新定义cached，它将再次起作用。谁能解释为什么？

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

最佳答案

这似乎可行:
http://jsfiddle.net/9uxtT/
与您的情况有何不同？