2番目のAJAXコールの後にjQueryコードが実行されない

Question

私のAJAX/jQuery実装についてのヘルプを探しています。

jQueryダイアログに動的にコードをロードしようとしています。
ボタンを初期化してタブを読み込むjQueryコードがいくつかあります。

問題は、ロードされたコンテンツ内のコードが2番目のAJAX呼び出しで実行されていないことです。だから、最初はすべてうまく動作しますが、ダイアログを閉じてもう一度やり直した後ではありません。

基本ページ：

$("#button").click(function() { someFunction(); }); 

function someFunction() { 
    var dialogVar = $('<div id="dialog"></div>').appendTo('body'); 
    dialogVar.dialog({ autoOpen: true, 
      modal: true, 
      close : function(){ 
       $(this).dialog("destroy"); 
      }, 
      open : function(){ 
         dialog.load("dialogcontent.php",{} , function(data){ 
         // Some logic  
        }); 
    } 
} 

動的にロードされたコンテンツ（dialogcontent.php）

<script type="text/javascript"> 
    $("#tabs").tabs(); 
</script> 


<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-0">Tab1</a></li> 
     <li><a href="#tabs-1">Tab2</a></li> 
    </ul> 
</div> 


<div id="tabs-0">Tab1 Content</div> 
<div id="tabs-1">Tab2 Content</div> 

だからもう一度、タブが初めてではなく、二度目に作成されます。 POSTコールがサーバーに送信され、データが返されているのを確認できますが、JSは実行されません。

Answer 1

ボタンをクリックするたびにダイアログノードを再作成してDOMに追加することが問題になっている可能性があります。 （ページの読み込み時に）ダイアログを一度インスタンス化し、autoOpenをfalseに設定してすぐにポップアップしないようにコードを再構築し、ボタンを押してダイアログを開くだけです。

$(function(){ 
    var dialogVar = $('<div id="dialog"></div>').appendTo('body'); 
    dialogVar.dialog({ 
    autoOpen: false, 
    modal: true, 
     close : function(){ 
     $(this).dialog("destroy"); 
     }, 
     open : function(){ 
     dialog.load("dialogcontent.php",{} , function(data){ 
      // Some logic  
     }); 
     } 
    }); 

    $("#button").click(function() { 
    $('#dialog').dialog('open'); 
    }); 

}; 

私はあなたがjQueryのUIのダイアログを使用していると仮定しているので、私はここに利用できるドキュメントを参照しました：http://jqueryui.com/demos/dialog/#method-open

Answer 2

する必要があります。 openFunction（）の前に？

さらに、質問と回答は、ここに記載されている： How to call second jQuery.ajax instance on success of first and update page

は、使用のものであってもよいです。

Answer 3

私はあまりにもこれに走りました。

タブのように見えるのは、呼び出しの間にある状態を保持し、後続の呼び出しは各タブのIDをインクリメントして内部状態を混乱させます。それらを見つけるためにJSLintのようなツールを使ってあなたのコードを実行します - あなたは構文エラーを持っている

close : function(){ 
     $("#tabs").dialog("destroy"); 
     $(this).dialog("destroy"); 
    },