How to show/hide comment using jquery while operate with DOM
<p>I would like to thanks to this post <a href="http://stackoverflow.com/questions/3727635/jquery-show-all-comments-click-hide-at-success">enter link description here</a> it is actually working but only when html document written directly.
But it doesn't work while apply the same thing in document that created by jquery. can you please advise how to solve this?</p>

<p>my code is </p>

<pre><code>&lt;script&gt;
var toggle = false;
$(function() {
    $('a.comments').click(function(e) {
        var $this = $(this);
        $('.toggleComments').toggle(1000,function() {
            if(!toggle) {
                $this.text('Hide Comments');
                toggle = !toggle;
            }else {
                $this.text('Show Comments');
                toggle = !toggle;
            }
        });
        e.preventDefault();
    });
}); 

var html;
$(document).ready(function()
{
html='&lt;a href="#" class="comments"&gt;Show Comments&lt;/a&gt;&lt;br /&gt;&lt;div class="toggleComments"&gt;This is #comment1 &lt;br /&gt;This is #comment2 &lt;br /&gt;&lt;/div&gt;';

$("#start").append(html);

}); 
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;div id="start"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
