Question

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

Here is my jquery code:

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

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

For complete HTML and javascript code, please check here: https://gist.github.com/3024186

It is working in jsfiddle
but not in my localhost. Could you tell the reason, why is it so?

Thanks!

UPDATE

I’ve also tried this

$(".keywords_set").on('click', ".comment", function(event) {
    event.stopPropagation();
});

event.stopPropagation() is not working for HTML elements updated through ajax. But is working for normal(already given) elements.

Answer 1

When doing this:

$(".keywords_set").on('click', ".comment", function(event) {

You must understand that you’re catching the event in the element “.keywords_set”, and there you will be checking if it bubbled up through “.comment”

This means that any other “click” events set between “.keywords_set” and “.comment” will also activate.

doing stop propagation or returning false will only take affect from the bubbling of “.keywords_set” to the document.

You can do this:

$(document).click(function() {
   if($(".comment:hover").length==0){
      $(".comment").hide();
   }
});

Edit: reply to: “Hey, that code works, I don’t know how you are doing it by mentioning .comment.length could you be more descriptive about that?”

When you do any jquery selector, an array is returned. so if you do $(".comment") all html nodes with the class “.comment” will be returned to you in a list [obj1, obj2, …, objn]

When you do $(".comment:hover") you are asking jquery to select you any element with the class “comment” which also have the mouse currently on top of it. Meaning if the length of the list returned by $(".comment:hover") is bigger than zero, then you caught a bubble from a click in a “.comment”.

Although either returning false or stoping propagation should also work. (dunno why in your case it is not working, although i didn’t look much at the full code)

Edit 2:

i was lazy to read the full code. but when you are setting the click event for the comment, the comment doesn’t exist yet. so the new comment you are adding will not be be caught by your click handler. add it inside the ajax callback and it will work 🙂

Edit 3: one more thing:

you are not getting side effects because the click even you are re-defining only has the the stop propagation, but you should add the stop propagation before returning false in the

$(".keywords_set").on('click', ".comment", function(event) {

because in practice all other comments you have will be proccessing N times the click event that you are adding to be processed multiple times