jQuery Mobile動的にダイアログボックスにhtmlを追加する方法

Question

特定のページからダイアログを開き、ダイナミックデータをダイアログにロードすることを検討しています。

メインページには、クリックするとそのリンクに関する詳細情報が表示されます。私はそのリンクのために持っているすべてのデータがメインページに含まれています。どういうわけか、ダイアログが開くときにそのダイアログが設定されるように、ダイアログを割り当てたいと思います。

私はこれまでのところ、このような何かを試してみた：

<?php foreach($offers as $offer) : ?> 
    <a href="#" data-rel="dialog" data-icon="info" data-role="button" data-desc="<?php echo $offer->{'offer_description'}; ?>" class="offer" id="offer-<?php echo $offer->{'offer_id'}; ?>"><?php echo $offer->{'offer_name'}; ?></a> 
    <?php endforeach; ?> 

は、それから私は、リンクのクリックをキャッチし、ダイアログに「データ-DESC」メタをロードするイベントキャッチャーを持っているが、これはそうではありません作業。

$('.offer').live('click', function(){ 
    var data = $(this).attr('data-desc'); 
    $("#data-desc").html(data); 
    $("#dialog-offer").dialog("open"); 
    return false; 
}); 


<div data-role="content" id="dialog-offer"> 
<p class="data-desc"></p> 
</div> 

私はこれをjQMで行う方法の例を探していました。これは一般的にjQMの基本的な必要性であり、私は例が見つからないことに驚いています。誰かが私を正しい方向に向けることができますか？助けてくれてありがとう。

Answer 1

あなたはあなたのコード内のエラーの数を持っている：

1. あなたはdata-role="content"で<div>にid="dialog-offer"を与えています。あなたは、別のdivでdiv

2. data-role=pageであなたは必ずしも$("#dialog-offer").dialog("open");を使用する必要がないことをラップする必要があります。設定するだけ<a href='#dialog-offer'>

3. html()コールのセレクタが間違っています。 http://jsfiddle.net/PBb3h/

   は正確にあなたが好きではありませんが、それは何を行います<p>のクラス名は、私は、コードを書き換え、ここでそれを掲載しているあなたは、IDスタイルのセレクタ

で使用しているものです欲しいです。