AJAX jQuery UIタブ（未来のDOM要素）に隠れたdivを読み込む

Question

私はAJAX経由でjQuery UIのタブに読み込まれるコンテンツを操作しようとしています。 これらの要素は将来のDOM要素であり、通常の$（ "。someClass"）関数では操作されません。

イベント処理がjQuery 1.7以降で廃止され、新しい.on（）メソッドに置き換えられたため、.live（）を使用して読みました。

私の問題は、AJAXタブに読み込まれたときに非表示にしたいdivが、最初のDOMロードの後に​​操作され、最初にクリックイベントにバインドされていないことです。

現在、$（）でラップされている私の関数は次のとおりです。

クリックハンドラを使用するリンクには正しい構文があると思いますが、ロード時に "hidden"（ "hidden"）する正しい方法がわかりません。

また、関数自体を全体の$（）にラップするべきではないとも思いますか？

何か助けや助言をいただければ幸いです。

$(function(){ 
    // this .hiddenStory div below is what I want to hide on AJAX load 
    // need syntax and/or new methods for writing this function 
$(".hiddenStory").hide(); 

    // this is a function that allows me to toggle a "read more/read less" area 
    // on the "hiddenStory" div 
$(".showMoreOrLess").on('click', (function() { 
if (this.className.indexOf('clicked') != -1) { 
    $(this).removeClass('clicked'); 
    $(this).prev().slideUp(500); 
    $(this).html("Read More" + "<span class='moreUiIcon'></span>"); 
    } 
    else { 
    $(this).addClass('clicked'); 
    $(this).prev().slideDown(500); 
    $(this).html("See Less" + "<span class='lessUiIcon'></span>"); 
    }  
})); 
}); 

// prevents default link behavior 
// on BBQ history stated tab panes with  
// "showMoreOrLess" links 
$('.showMoreOrLess').click(function (event) 
{ 
event.preventDefault(); 
// here you can also do all sort of things 
}); 
// /prevents default behavior on "showMoreOrLess" links 

Answer 1

あなたはCSSを経由してdisplay: noneを設定し、要素の内容を表示したいときにそれをオーバーライドしてもらえますか？別のオプションは、このようにする必要がある場合は、要素に値を設定しているAJAXロードからコールバックに `$（"。hiddenStory "）。hide（）を追加することです。あなたは.LOADメソッドを使用していない場合、あなたに結び付けるためにコールバックのいくつかの並べ替えを持っている必要があり

$(".hiddenStory").load("http://myurl.com", function(){ 
     $(".hiddenStory").hide(); 
    } 
); 

（$アヤックスを使用している場合、例えば、成功...）