jQueryUiダイアログが動的にjQueryUiダイアログに読み込まれました。

Question

私はRuby and Railsアプリケーションを持っています。

私はAjaxを使用してフォームをロードしています。フォームは既存のレールビューです。フォームには、jQueryUiタブが含まれています。

残念ながら、フォームがjQueryダイアログボックスに読み込まれると、タブは表示されません。ここで

私は、次のようなコードを変更するとダイアログボックス

$('#create_candidate').click(function(e) { 
    var url = $(this).attr('href').replace('?','.js?'); 
    var new_candidate_dlg = $('<div id="new_candidate_dlg">Loading form ...</div>'); 

    new_candidate_dlg.load(url); 

    new_candidate_dlg.dialog({ 
     autoOpen:false, 
     width: 'auto', 
     height: 'auto', 
     modal: true, 
     close: function() { 
     $('new_candidate_dlg').remove(); 
     }, 
     open: function() { 
     $('#tabs').tabs(); 
     } 
    }); 
    new_candidate_dlg.dialog('open'); 
    e.preventDefault(); 
    }); 

のコードは不思議なこと、タブが表示されませんが、私はタブをクリックしたときにのみされます。

$('#create_candidate').click(function(e) { 
    var url = $(this).attr('href').replace('?','.js?'); 
    var new_candidate_dlg = $('<div id="new_candidate_dlg">Loading form ...</div>'); 

    new_candidate_dlg.load(url); 

    new_candidate_dlg.dialog({ 
     autoOpen:false, 
     width: 'auto', 
     height: 'auto', 
     modal: true, 
     close: function() { 
     $('new_candidate_dlg').remove(); 
     }, 
     open: function() { 
     $('#tabs').live('click', function(){ 
      $(this).tabs() 
     }); 
     } 
    }); 
    new_candidate_dlg.dialog('open'); 
    e.preventDefault(); 
    }); 

Answer 1

タイミングに問題があります。

1. new_candidate_dlg.load(url)
2. new_candidate_dlg.dialog(...)：実行順序は、おそらくこのような何かを行っています。
3. new_candidate_dlg.dialog('open')。
4. .load(url)は、HTMLを終了し、new_candidate_dlgにHTMLをロードします。ダイアログのopenコールバックが実行されたとき

だから、利用可能な#tabs要素がないと$('#tabs').tabs()コールは何もしません。

new_candidate_dlg.load(url, function() { $('#tabs').tabs() }); 

をして、あなたのnew_candidate_dlg.dialog({ ... })呼び出しからopenコールバックを削除：あなたはload HTMLをロードしたとload後にタブをバインドしたいのはあなただけで、その目的のために使用できるコールバックを持っています。

このコールバックが機能：

open: function() { 
    $('#tabs').live('click', function() { 
    $(this).tabs() 
    }); 
} 

あなたはクリックイベントのためliveを使用している（そう#tabsあなたが$('#tabs').live()を呼び出すときに存在している必要はありません）、それがあるまで何もクリックされないため、ページ上で準備が整いました。

Answer 2

私はコーディングでは新しいですが、私はそれを撃つでしょう。要素を識別するためにclose関数内に何かがないか（＃id attrのために）、またはあなたが以前宣言した変数を誤って記述しています。

また、あなたの.dialog（）呼び出しは、あなたの.click（）イベントハンドラとは別に、つまりスクリプトの前の方でなければならないと思います。

私は通常、e.preventDefault（）を参照します。イベント機能の先頭に表示されます。 openメソッドへの呼び出しは二重引用符で囲む必要があります。

クリックイベントハンドラとして.tabs（）メソッドが発生しているため、タブをクリックすると2番目の例が動作しています。 （live（）は1.7より新しいjQueryを使用している場合は非推奨です）

ダイアログにhtmlを投稿できますか？それは私がより良い答えを提供しようとするのに役立ちます。