I've only been using jQuery for a few days and am stuck with the issue that appears to be discussed in the FAQ topic "Why do my events stop working after an AJAX request?". I can't seem to correct the problem with the suggestions, but I may be misunderstanding things...

 

I am building a social-networking type site. I have the ability to post comments (similar to Facebook) and am currently using AJAX to run the SQL INSERT query and refresh the div to which the comment was posted. Said div is set up to show the last two comments initially, but clicking a link (which is part of the refreshed div) will toggle between showing all comments and showing the last two. I added the slideToggle effect to this - which works great, until I post a comment. When the div is refreshed (again via AJAX), the slideToggle doesn't work. I am returning the jQuery script in my AJAX call so does that mean there is an issue with re-binding?

Here are some snippets of my code:

 

PRIOR TO AJAX CALL (NO PROBLEMS WITH jQUERY):

 

1. <div id='divComments55'>
2.             <table align='center'>
3.           <tr>
4.             <td align='center'>
5.               <a id='comments55'>view all 3 comments</a>
6.             </td>
7.           </tr>  
8.            <tr>
9.                   <td>
10.                     COMMENT 3
11.                   </td>
12.                 </tr>
13.                 <tr>
14.                   <td>
15.                     COMMENT 2
16.                   </td>
17.                 </tr>
18.           </table>
19.           <div id='divHidden55' style="display: none">
20.             <table align='center' >               
21.                 <tr>
22.                   <td>
23.                     COMMENT 1
24.                   </td>
25.                 </tr>
26.             </table>
27.           </div>
28.           <script>
29.             $("#comments55").click(function () {
30.               $("#divHidden55").slideToggle("slow");
31.             });
32.           </script>
33. </div>

 

 

When I click "view all 3 comments" (which has the id "comments55") the slideToggle works fine. When I post a new comment, which is handled by AJAX (code not shown), the entire "divComments55" div is refreshed. So the code returned to this div by AJAX is:

 

1.  <div id='divComments55'>
2.             <table align='center'>
3.           <tr>
4.             <td align='center'>
5.               <a id='comments55'>view all 4 comments</a>
6.             </td>
7.           </tr>  
8.            <tr>
9.                   <td>
10.                     COMMENT 4
11.                   </td>
12.                 </tr>
13.                 <tr>
14.                   <td>
15.                     COMMENT 3
16.                   </td>
17.                 </tr>
18.           </table>
19.           <div id='divHidden55' style="display: none">
20.             <table align='center' >               
21.                 <tr>
22.                   <td>
23.                     COMMENT 2
24.                   </td>
25.                 </tr>
26.                 <tr>
27.                   <td>
28.                     COMMENT 1
29.                   </td>
30.                 </tr>
31.             </table>
32.           </div>
33.           <script>
34.             $("#comments55").click(function () {
35.               $("#divHidden55").slideToggle("slow");
36.             });
37.           </script>
38. </div>

 

But now, the slideToggle doesn't work... is there something obvious I'm missing somewhere?

 

Any help is appreciated!