jquery events not firing on ajax call

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

Open in new window


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>

Open in new window


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').empty();						
    						$('.accordionContent').show();																		
    						$('.accordionContent').hide();						
    						$('.accordion-comments').empty();						
    						$('.accordion-comments').show();						
    						$('.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;
    	});

Open in new window


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?
ondrejko1Asked:
Who is Participating?
 
ondrejko1Connect With a Mentor Author Commented:
I was making the ajax call twice. It is now set at the document level.
0
 
mcnuteCommented:
A quick solution would be to use .live(); it is deprecated starting by jquery 1.8 but it gives the best results for dynamically added content on pages.

I wouldn't attach an event handler to the document itself, it is certainly not best practice. Do you have a wrapping container around your forms?

If that all has no effect, first get rid of all hashes in the href attributes of your hide/show links and make the following change to your jquery show/hide click event:

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

Open in new window

0
 
ondrejko1Author Commented:
Removing the hash from my href and adding the above code had no effect. In fact, it didn't respond at all, even before the ajax call.
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
mcnuteCommented:
Can you provide us with a fully working example of your code? This will make debugging so much easier. Preferably as a zip package ready to unzip into our local test-environments here.
0
 
ondrejko1Author Commented:
I can prove you with a login to where its located. That sufficient?
0
 
mcnuteCommented:
Yes. That'll be perfect.
0
 
ondrejko1Author Commented:
http://shootingattackclinic.playerspace.com/index.cfm/group/3450/action/login

username: seolms
password: test


The recent activity feed is the one Im having issues with.
0
 
mcnuteCommented:
It works just fine on my mac in google chrome. Which browser are you using?
0
 
ondrejko1Author Commented:
This is the ajax call, not the one I included above:
	$(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);											
						$("#siteusemore"+ID).remove();						
						$('.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');
                        }
                        });   					
					}
				});				
			}
		else
		{
			$(".siteusemorebox").html('The End');						
		}				
		return false;
	});

Open in new window

0
 
ondrejko1Author Commented:
Try all the links, then click the ajax a couple of times. You'll see what I'm talking about. It works sporadically. Usually its on the 3rd ajax call.
0
 
mcnuteCommented:
Change the click event to something like so:

  $('.accordionContent,.accordionContent-settings').hide();
    $('.comments-link').on('click', 'a'. 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;
            	});

Open in new window

0
 
mcnuteCommented:
	$(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);											
						$("#siteusemore"+ID).remove();						
						$('.accordionContent').hide();							
				        $('.comments-link').on("click", "a", function(){
                        var target=$(this).attr('href');
                        if($(target).css('display')=='none')
                        {
                            $(target).show();
                            $(this).text('Hide Comments');
                        }
                        else
                        {
                            $(target).hide();
                            $(this).text('Comments');
                        }
                        });   					
					}
				});				
			}
		else
		{
			$(".siteusemorebox").html('The End');						
		}				
		return false;
	});

Open in new window


Here also.
0
 
ondrejko1Author Commented:
Did as you advised, still producing unresponsive anchor elements.
0
 
ondrejko1Author Commented:
Any other ideas?
0
 
mcnuteCommented:
just one question how do i fire the ajax call on the page? It has a lot of areas and functionality. Sorry, just too lazy to seek in the code ;-)
0
 
mcnuteCommented:
Did you try live instead of on

$('.comments-link a').live("click", function(){ ....

Open in new window

0
 
ondrejko1Author Commented:
Yes, live had no effect.
0
 
mcnuteCommented:
Really strange, the only thing i can advice you is to use the very latest jquery 1.9 instead of 1.7. Maybe that helps.
0
 
ondrejko1Author Commented:
figured it out myself
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.