0

Jquery1.7.2を使用しています

最初のページの読み込み時に、ページの最後に読み込まれ、$（document）.ready（function（）{でラップされた外部JSで次のスクリプトを実行しています。

    $('.accordionContent,.accordionContent-settings').hide();
$('.accordion-comments').click(function(){
            var target=$(this).attr('href');
            if($(target).css('display')=='none')
            {
                $(target).show();
                $(this).text('Hide Comments');
            }
            else
            {
                $(target).hide();
                $(this).text('Comments');
            }
            return false;
            });

コードは基本的に、この順序付けされていないリストに含まれるフォームを非表示にし、[コメント]リンクをクリックするとフォームを表示します。次に、文言が[コメントを非表示]に変更され、もう一度クリックすると、フォームが再び非表示になります。

<ul class="sportswire-posts quarterfont">
                        <li>                            
                            <p><a href="/modals.cfm?action=profile_glimpse&script=%2Findex%2Ecfm%2Fgroup%2F3450%2Faction%2Fdashboard&member_id=5" rel="facebox" class="capitalize">Todd John</a> joined the team &quot;<a href="http://shootingattackclinic.playerspace.com/local_sports_teams.cfm?group=628">Mercury</a>&quot;.</p>
                            <p class="comments-date">11:38 AM EST on January 31, 2013</p>
                        </li>                       


                            <li class="comments-link">
                                <a href="#comments35800" class="accordion-comments">Comments</a> 
                            </li>                       

                        <li class="accordionContent posts-comments" id="comments35800">

                                <form method="post" action="/index.cfm/group/3450/action/dashboard/m0dal_update/leave_feedback/member_id/68/comment_type/17/id/35800">
                                    <ul>
                                        <li>
                                            <div class="expandingArea">
                                                <pre><span></span><br /></pre>
                                                <textarea name="str_comment" message="Enter a comment." rows="4" cols="10" required="Yes" html="No" id="str_comment24234"></textarea>                                           
                                            </div>                                      
                                            <div class="pixelspacer10"></div>
                                        </li>
                                        <li>
                                            <input name="Post Comment" type="submit" value="Post Comment" />
                                        </li>                               
                                    </ul>
                                </form>

                        </li>                                                                               
                    </ul>

問題は、上記のような追加のULSを取得するためにajax呼び出しを行う場合です（もちろん、異なるIDを使用します）。

$(document).on("click",'.siteusemore',function()
        {
        var ID = $(this).attr("id");
        var myscript = window.siteusemore_script || null;       
        if(ID)
            {
                $("#siteusemore"+ID).html('<img src="/images/processing.gif" />');                  
                $.ajax({type: "POST",url: myscript,data: "lastmsg="+ ID, cache: false,
                    success: function(html){                                    
                        $("ol#siteuseupdates").append(html);                
                        $('.accordionContent').hide();                      
                        $('.accordion-comments').on("click",function(){
                        var target=$(this).attr('href');
                        if($(target).css('display')=='none')
                        {
                            $(target).show();
                            $(this).text('Hide Comments');
                        }
                        else
                        {
                            $(target).hide();
                            $(this).text('Comments');
                        }
                        });                                                                                     
                        $("#siteusemore"+ID).remove();                      
                    }
                });             
            }
        else
        {
            $(".siteusemorebox").html('The End');                       
        }               
        return false;
    });

上記の方法は一貫性がありません。非表示/表示イベントは、すべてではありませんが、一部のアイテムに対して発生します。ajxを介してロードされたすべてのコメント/フォームの組み合わせに対して機能させることができない理由を理解できないようです。私は何が間違っているのですか？

4

2 に答える 2

1

click（）関数を使用してイベントハンドラーを割り当てていました。これは、ページが最初に読み込まれたときに存在する要素にのみイベントをバインドします。代わりにon（）を使用するように変更する必要があります。

$("body").on("click", ".accordion-comments", function(){
     //put he click code in here
});

クリックイベントを2回バインドしていました。1回はページが最初に読み込まれたとき、もう1回はajax呼び出しの後でした。on（）関数を使用すると、ページが最初に読み込まれたときにのみバインドする必要があるため、ajax呼び出しのsuccess関数から削除します。

于 2013-02-13T03:10:52.377 に答える
0

ジェフリー、

私が最初に目にする問題はここにあります：

var target=$(this).attr('href');
if($(target).css('display')=='none')
{..}

あなたの問題は次のとおりです。

var target=$(this).attr('href');

変数「target」は文字列を保持します。次の行：

if($(target).css('display')=='none')

文字列をjQueryオブジェクトとして使用しようとすると、エラーが発生します。

私はこれを試していませんが、お勧めします：

$('.accordion-comments').on("click",function(){
    if($(this).find("a").is(":visible"))
    {
        $(this).find("a").show();
        $(this).text('Hide Comments');
    }
    else
    {
        $(this).find("a").hide();
        $(this).text('Comments');
    }
});

主な変更点は、オブジェクトを正しく参照していることと、「is」（jqueryユーティリティ）を使用していることです。

これがお役に立てば幸いです。

-リカルド

于 2013-02-01T18:21:56.397 に答える