ajaxによって呼び出されたページ内にポップアップメニューを作成する

Question

私はかなり長い時間クリックするとメニューをポップアップするajax関数によって呼び出されるボタンを作成しようとしていましたが、それを出す。 PHPページはpostAllという名前のAjaxメソッドを介してCBOXと呼ばれるのdivの下に掲載されています。私は、addEventListenerをを使用してみました

<script src="jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="jquery-latest.js"></script> 
<script type="text/javascript"> 
function toggleElement(id) 
{ 
    var element=document.getElementById(id); 
    if(element.style.display=="block") 
    { 
     element.style.display="none"; 
    } 
    else 
    { 
     element.style.display="block"; 
    } 
} 
function postAll() 
{ 
    if(String(window.location).indexOf("?")==-1) 
    { 
     var location=window.location.href; 
    } 
    else 
    { 
     var location=window.location.href.substring(0,window.location.href.indexOf("?")); 
     var clength=(window.location.href.length-1)-(window.location.href.indexOf("currentpage"))-11; 
     var currentpage=window.location.href.substr(window.location.href.length-clength,clength); 
    } 
    xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("cbox").innerHTML=xmlhttp.responseText; 
     } 
     } 
    xmlhttp.open("GET","dynamic.php?location="+location+"&currentpage="+currentpage,true); 
    xmlhttp.send(); 
} 

$(document).ready(function() 
{ 
    document.getElementById("option").addEventListener("click",function(){alert("Success");}); 
    postAll(); 
}); 
</script> 

が、私はそれを正しく使用しているかわかりません。私はまた、次のコードを使用してみましたが、それはどちらか動作しませんでした：

$("#cbox").delegate("a","click", function() { 
    toggleElement('option_toggle'); 
}); 
$("#cbox").on("click", "a", function() { 
    toggleElement('option_toggle'); 
}); 

私もキャッチされないタイプのエラーを得た.on方法について。すべてのヘルプははるかに高く評価されるだろう

<div id="option"><p><a href="#"><img class="select" src="cog.png"></img></a></p></div> 
<div id="option_toggle" style="display:none;"> Random Text </div> 

： は、ここで私は、メニューをポップアップ表示するために取得しようとしている実際のボタンです。

Answer 1

サンプルでダイアログを開くためのコードが表示されません。とにかく - 私は本当に小さな例を追加しました。 このコードでは、jquery-uiをダウンロードし、のサンプルに従っています。

私は、接続がないのにAjaxを追加しました.JQueryを使ってすべてのコメントを投稿しました。

は、ここでファイル＃1である - 最初の1に注入される - ここで今、いくつかのより多くのコンテンツ

<button onclick="loadAjaxContent()">Load ajax content</button> 


<div id="ajaxContentContainer"> 

</div> 


<script type="text/javascript"> 
    function loadAjaxContent() 
    { 
     $.ajax({ 
      url:'/Application/content', 
      data:{param1:"value1"}, 
      success:function(result){$("#ajaxContentContainer").html(result)}, 
      error:function(result){$("#ajaxContentContainer").html(result.responseText)} 

     }) 
    } 
</script> 

にAjax呼び出しを呼び出すページ＃2であるボタンが含まれています。このページには、ダイアログを開く別のボタンがあります。

<button onclick="openPopup()">open popup</button> 


<div id="dialogContent"> 
    this is a dialog content 
</div> 
<script type="text/javascript"> 
    $("#dialogContent").dialog({autoOpen:false}); 
    function openPopup() 
    { 

     $("#dialogContent").dialog('open'); 
    } 
</script> 

すべてのjsファイルとcssファイルを正しくインポートしてください。インポートするファイルのリストは以下のとおりです。

1. jqueryの-UI-1.8.16.custom.css（バージョン変更になる場合があります） - このファイルには、「画像」の右隣にあるフォルダ
2. jquery-を持つべきです1.6.2.min.js（バージョンは変更になる場合があります）
3. jqueryの-UI-1.8.16.custom.min.js

あなたはAFTER "jqueryの-UI" ファイルをインポートする必要があります（バージョンは変更される場合があります） 「jquery」ファイル順序は重要です。

これはうまくいくはずです。 もっと必要な場合は教えてください。