jQueryを使用した動的ダイアログ

Question

フォームの各ラジオボタンの横にイメージがあります。ラジオボタンの数と内容は、データベースから取り出されます。私はこれらの画像上でクリックイベントを作成しようとしています。それぞれのオプションについて簡単に紹介しています。

$('#icon').click(function() { 
    $('#dynamicid').dialog(); 
    return false; 
}); 

私はクリックでダイアログを作成する方法を知っていますが、idと内容がphpを使用してDBからフェッチされるdivから作成する方法はわかりません。どうやってやるの？

P.S：jQueryを初めて使用しました。

Answer 1

多くのことは周囲の要因によって異なります。正確にどこからダイアログdivs来るように。

のは関係なく、他のマークアップの、あなたがクリックするあなたのイメージを持っている、とあなたのダイアログのdivはマークアップで次の兄弟である瞬間を仮定しよう：

<div id="wrapper"> 
    <input type="radio"> <!-- simplified; I didn't look up the actual markup syntax --> 
    <img src="foo" class="clicky"/> 
    <div class="dialog">This is the related dialog</div> 

    <input type="radio"> <!-- simplified; I didn't look up the actual markup syntax --> 
    <img src="bar" class="clicky"/> 
    <div class="dialog">This is related to the previous image</div> 
</div> 
<div id="myDialog"></div> <!-- a container that can be reused; put it right before the body tag closes --> 

あなたは、ダイアログのdivを非表示にしますドンので、クリックまで表示される必要があります：

.dialog, #myDialog { display: none; } 

次に、このタイプの画像にクリックを委任するか、またはバインドします。私は代議員が好きです：

$('#wrapper').delegate('img.clicky', 'click', function() { 
    var theContent = $(this).next().html(); 
    $('#myDialog').html(theContent).dialog(); 
}); 

これは簡単です。ラッパーはクリックをリッスンしています（これはクリック可能な画像を含むすべての祖先です）。画像上でクリックが聞こえます（これは「これ」です）。 jQueryを使用して、次の兄弟（ダイアログdiv）に移動し、その内容をコンテナdivに追加し、その上でdialog（）を呼び出します。

フィドル更新：http://jsfiddle.net/txugb/3/

（jQueryのUIが含まれているものの、そのCSSがないことに注意してください。ダイアログが正しく表示されませんが、それが表示されます。）

[更新：]応答で を私が提案した方法で可能なレイアウトの問題に、私は単一のダイアログコンテナを再利用するように関数を修正しました。

投稿者のコメントの後、最初の提案には欠陥があった可能性があります。 jQuery UIがダイアログを隠すと、それがbodyタグに追加されると思います。