1

AJAXを介してjQueryUIタブにロードされるコンテンツを操作しようとしています。ご想像のとおり、これらの要素は「将来の」DOM要素であり、通常の$（ "。someClass"）関数によって操作されることはありません。

イベント処理に.live（）を使用して読んだことがありますが、jQuery 1.7以降を使用することは非推奨になり、新しい.on（）メソッドに置き換えられました。

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

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

クリックハンドラーを使用するリンクの構文は正しいと思いますが、ロード時に「hiddenStory」divを「.hide（）」する正しい方法がわかりません。

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

どんな助けやアドバイスも大歓迎です。

$(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
4

1 に答える 1

1

display: none要素のコンテンツを表示したいときに、CSS経由で設定してオーバーライドできますか？別のオプションとして、この方法で行う必要がある場合は、要素にデータを入力しているAJAXロードからのコールバックに `$（"。hiddenStory "）。hide（）を追加します。例えば：

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

.loadメソッドを使用していない場合は、何らかのコールバックを使用して接続する必要があります（たとえば、$。ajaxを使用している場合は成功します...）

于 2012-04-20T18:41:01.040 に答える