jQueryが動的にロードされたjQuery Mobileボタンを検出しないのはなぜですか？

Question

次のHTMLをAjax経由でjQuery Mobileを搭載したWebページにロードしました。重要なのは、アンカータグに添付されたクラス名がonButtonであることです。

<a class="onButton ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-role="button" data-inline="true" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Turn On</span></span></a> 

Ajaxを経由してロードした後、私は、ドキュメントごとにjQueryのモバイルボタンのスタイルを適用するには、「作成イベント」を引き起こしました。

$.ajax({ 
    url: '/loadAllButtons', 
    context: $('contentBox'), 
    cache: false, 
    data: {'listOfEntities': JSON.stringify([1,2,3,4,5])}, 
    success: function(data) { 
     $(this).html(data).trigger("create"); 
    } 
}); 

ボタンが正常に読み込まれていることがわかります。しかし、私はconsole.log($('.onButton').length);、コンソール0が表示されます。Chromeウェブ開発者がAjaxを介してロードonButtonクラスで<a>タグの5つのインスタンスを指摘しているため、興味深いです

を呼び出すとき。

なぜ、jQueryは新しく読み込まれたアンカータグ（またはボタン）を検出しないのですか？ここでは、明確にすることが

---

は、私がデバッグ午前方法です：

$.ajax({ 
    url: '/loadAllButtons', 
    context: $('contentBox'), 
    cache: false, 
    data: {'listOfEntities': JSON.stringify([1,2,3,4,5])}, 
    success: function(data) { 
     $(this).html(data).trigger("create"); 
    } 
}); 
console.log($('.onButton').length); 

ありがとうございました。

Answer 1

デバッグをconsole.log()にして、AJAX呼び出しのコールバックに入れる必要があります。つまり、console.log()は、リクエストが送信された直後（デフォルトではAJAXリクエストは非同期であるため）に実行されます。これは、レスポンスがサーバから受信される前であるため、DOMにすべての要素が追加される前です。

この試してみてください：あなたは既にjQueryのモバイルクラス/構造が適用されているDOMにボタン要素を追加しているので、あなたは要素の代わりに、.trigger('create')へのリフレッシュに.button('refresh')を呼び出す必要があり、また

$.ajax({ 
    url: '/loadAllButtons', 
    context: $('contentBox'), 
    cache: false, 
    data: {'listOfEntities': JSON.stringify([1,2,3,4,5])}, 
    success: function(data) { 
     $(this).html(data).trigger("create"); 
     console.log($('.onButton').length); 
    } 
}); 

をそれらを初期化する。私はあなたがボタンの祖先要素の上またはあなた自身が好きなボタンの上にそれを呼び出す必要があれば、それを呼び出すことができるかどうかわからないんだけど前に私が.button('refresh')を使用していない：

$(this).html(data).find('.onButton').button("refresh");