jquery - using event.stopPropagation()
<p>When the document is ready, I'm fetching some datas from the server through post request and I'm filling it in the <strong>HTML as tags by append</strong>. When you click that tag, a comment textarea will be displayed. When you click in the <code>document</code> section, the <strong>textarea will be closed</strong>. The problem here is I can't enter the text in the textarea, when I click inside, it is hiding. I tried using <code>event.stopPropagation()</code> but no use.</p>

<p>Here is my jquery code:</p>

<pre><code>$.post("/person/keywords/get/", function(data){
    for(i=0; i&lt;data.length; i++)
    {
        count = count + 1;
        $(".keywords-set").append('&lt;div class="keyword-item"&gt;&lt;span class="keyword" id="keyword-'+count+'"&gt;'+data[i]+'&lt;/span&gt;&lt;textarea class="comment" id="comment-'+count+'"&gt;&lt;/textarea&gt;&lt;/div&gt;');
    }
});

$(".keywords-set").on('click', "[id^=keyword]", function(event) {
    event.preventDefault();
    i = $(this).attr("id");
    i = i.split('-').pop();
    $("#comment-"+i).show();
    return false;
});

$(".comment").click(function(event) {
    event.stopPropagation();                     
});

$(document).click(function() {
    $(".comment").hide();
});
</code></pre>

<p>For complete HTML and javascript code, please check here: <a href="https://gist.github.com/3024186" rel="nofollow">https://gist.github.com/3024186</a></p>

<p>It is working in <a href="http://jsfiddle.net/hT25Q/" rel="nofollow">jsfiddle</a>
but not in my localhost. Could you tell the reason, why is it so?</p>

<p>Thanks!</p>

<p><strong>UPDATE</strong></p>

<p>I've also tried this</p>

<pre><code>$(".keywords_set").on('click', ".comment", function(event) {
    event.stopPropagation();
});
</code></pre>

<p><code>event.stopPropagation()</code> is not working for HTML elements updated through ajax. But is working for normal(already given) elements.</p>
