Question

我正在使用Jquery 1.7.2

在初始页面加载时，我在页面末尾加载的外部JS中执行以下脚本并包装在$（document）.ready（function（）{

    $('.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加载的每个评论/表单组合工作。我究竟做错了什么？

Answer 1

我使用click（）函数分配事件处理程序。这只会将事件绑定到页面首次加载时存在的元素。您需要将其更改为使用on（）代替：

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

我绑定了点击事件两次 - 一次是首次加载页面，然后是你的ajax调用之后。使用on（）函数意味着您只需在页面首次加载时绑定它，因此将其从ajax调用的success函数中删除。

Answer 2

杰弗里，

我看到的第一个问题是：

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实用程序）。

我希望这有帮助，

-Ricardo

jquery事件没有在ajax调用上触发

2 个答案: