jquery events not firing on ajax call

Question

I am using Jquery 1.7.2

On initial page load I am executing the following script in an external JS loaded at the end of the page and wrapped in $(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;
            });

The code essentially hides the form contained in this unordered list and reveals the form when the "Comments" link is clicked. The wording is then changed to Hide Comment and when clicked again the form is hidden again.

<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>

The problem is when I make an ajax call to get additional ULS like the the one above (with different ids of course).

$(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;
    });

The above method works inconsistently. The hide/show event fires for some items, but not all. I can't seem to figure out why I just can't get it to work for every comment/form combination loaded via ajx. What am I doing wrong?

Jeffrey Shain · Accepted Answer · 2013-02-13 03:10:52Z

1

I was assigning event handler using the click() function. This will only bind the event to elements that exist when the page first loads. You need to change that to use on() instead:

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

I was binding click event twice - once when the page first loads, and then again after your ajax call. Using the on() function means you only need to bind it when the page first loads, so remove it from the success function of the ajax call.

answered Feb 13, 2013 at 3:10

Jeffrey Shain

659 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

covo · Accepted Answer · 2013-02-01 18:47:07Z

0

Jeffrey,

The first problem I see is in here:

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

Your problem is the following, after:

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

the variable "target" will be holding a string. On the next line:

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

You are trying to use the string as a jQuery object, and that is going to lead to errors.

I haven't tried this, but I would recommend:

$('.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');
    }
});

The main changes are that you are referring to the object correctly, and the use of the "is" (jquery utility).

I hope this helps,

-Ricardo

edited Feb 1, 2013 at 18:47

answered Feb 1, 2013 at 18:21

covo

5404 silver badges12 bronze badges

10 Comments

Jeffrey Shain Over a year ago

The above works in revealing the hidden div but does not conceal it when the link is clicked again.

covo Over a year ago

Just did a minor change. Instead of hiding the entire div, with the latest edit, you will hide/show the anchor side inside the target.

Jeffrey Shain Over a year ago

Now I have: $('.sportswire-posts').on('click', '.accordion-comments', function(){ var target=$(this).attr('href'); if($(this).find("a").is(":visible")) { $(target).find("a").show(); $(this).text('Hide Comments'); } else { $(target).find("a").hide(); $(this).text('Comments'); } return false; }); and both hide and show are unresponsive on click.

covo Over a year ago

Sorry about that, I had left the "target" variable there. You should not have it anywhere as it is no longer used. The main thing is for you to understand the cause of your problem... In this case it could be the use of target as an object. I would use the developer tools to debug the JS.

Jeffrey Shain Over a year ago

Oh I understand completely, really I do. I don't expect anything and appreciate your contributions.

|

Collectives™ on Stack Overflow

jquery events not firing on ajax call

2 Answers 2

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related