javascript - jQuery 要素のコンテナー階層アクセス

Question

物理ページ上の JQM 要素:

#page_test1
    button changing page to #page_test2

#page_test2
    div #place to put something programmatically

ボタンを #place コンテナー内に配置するために、次の (動作する) コードを作成しました。

$(document).on('pagebeforeshow', '#page_test2', function(event) {
    $('#place').empty();
    $('#place').append('<a href="#" data-role="button" data-theme="d">Dynamic button inserted by JavaScript</a>');
    $('#place').trigger('create');
});

わかりましたが、.on本文をスクリプト レベル (script タグの直下) に移動しようとすると、コンテキストが緩んでいるために内部のコードが正しくなくなります。

$(document).on('pagebeforeshow', '#page_test2', function(event) {
    addButton(); // Attempt to move widget manipulation up
});

// Widget manipulation not changed but moved outside (level up) .on
// Not working
function addButton() {
    $('#place').empty();
    $('#place').append('<a href="#" data-role="button" data-theme="d">Dynamic button inserted by JavaScript</a>');
    $('#place').trigger('create');
}

JQM 階層のさまざまなレベルおよびその外部から JQM 要素にアクセスする方法は?

これは JQM / Ajax にとって非常に基本的なものだと思いますので、共通の情報を含む URL を取得できることを非常にありがたく思います。