listening for click event on dynamic content and determining parent element

Question

I have a wall of posts that are dynamically generated, and with it I am trying to reproduce the same functionality Facebook has when you click the comment link it puts the focus on the textarea below it. However, I can't seem to get a hold of the right textarea within that wall. Let's say we have 15 posts, and therefore we have 15 of those comment links, and textareas to comment with. Now, I use jquery to listen for that event...

$(".wall-post").on("click", ".comment", function (event) {

event.preventDefault();

var id = $(".wall-post").attr("id");

//this keeps logging the same id
//I have also tried referring to 'this' but that does not work 
console.log(id);    

$("#"+id+ " .post-comment").focus();

});

I thought perhaps bubbling could be used to get an id of the parent element of the actual link that was clicked. I unfortunately don't think I can actually use bubbling for this purpose though. So now I am just shooting in the dark.

Any suggestions are welcome

Answer 1

I believe that the markup is going to be something like this (in shorthand):

.wall-post#<id>
    .content (or whatever)
    .comments
        .comment <-- [1]
    .post-comment

Inside your click handler, this will refer to the comment node itself, shown at [1] above.

So what you would want to do is go from there back up to the .wall-post that contains it, and then find within that the .post-comment node.

That would be:

$(this).closest('.wall-post').find('.post-comment').focus();

You don't even need to mess around with extracting the id at all!