jQuery UIを開くダイアログボックス動的コンテンツを含むダイアログボックスを開き、動的に反応してダイアログ内をクリックします。

Question

getData.phpファイルの動的コンテンツをjQueryダイアログに挿入します。今

<p id="data1" class="data">data1</p> 
<p id="data2" class="data">data2</p> 
<p id="data3" class="data">data3</p> 

私の問題である：

$("#buttonGetData").click(function() { 

    $.get("getData.php", function(data){ 
     $("#dialog").html(data); 
     $("#dialog").dialog(); 
     return false; 
    }); 
}); 

がgetData.phpが戻ったばかりのようなものを与える：それは、これまでに経由して正常に動作します私は、各データ行にダイナミッククリックリスナーを追加するにはどうすればよいので、私私のサイトでクリックされたデータを使用できますか？それぞれの 'p'をクリック可能にして、その内容を 'textarea'に設定するために内部のデータを使用します。

問題は、動的に追加された新しい行がサイトのJSの一部ではないため、clickListenerを使用してそれらにアクセスできないという問題があるようです。

これはどのように正しく行われますか？ありがとうございました！

Answer 1

$（取得）を使用したようにAjaxを使用してhtml関連のデータ結果を取得すると、新しく生成されたAjaxのhtmlはjQueryコードに使用できませんまたは他の言葉ではjQuery/JSは新しく追加されたhtml要素はAjaxから生成されます。必要な結果を達成する方法があります。あなたのjQuery/JSコードをHTMLコードでAjaxにあなたのファイル（getData.php）からStringとして送ることができます。あなたのgetData.phpでは、このようにエコーすることができます。

echo '<p id="data1" class="data">data1</p>'; 
echo '<script>'; 
echo "$(document).on('click', '#data1', function(){alert('DATA1 Clicked');});" 
echo '</script>'; 
die(); 

上記は非常に単純な回答かもしれないので、もっと納得のいく別の方法があります。イベントハンドラに基づいて委任を使用することもできます。例：

$("#dialog").on("click","p", function(){ 
    alert("DATA1 Clicked"); 
// your code to add content of this element to textarea 
}); 

$("#dialog").on("click","#data1", function(){ 
    alert("DATA1 Clicked"); 
// your code to add content of this element to textarea 
}); 

$(document).on('click', '#data1', function(){ 
    alert("DATA1 Clicked"); 
// your code to add content of this element to textarea 
}); 

そのうちの1人は問題を解決できるはずです。