0

我正在使用 Jquery 1.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>

问题是当我进行 ajax 调用以获取像上面那样的额外 ULS（当然具有不同的 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
});

我绑定了两次点击事件——一次是在页面第一次加载时，一次是在你的 ajax 调用之后。使用 on() 函数意味着您只需要在页面首次加载时绑定它，因此将其从 ajax 调用的成功函数中删除。

于 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 回答