Question

I am trying to generate a html code block when I click on a link. I have the same link “Reply” several times on the page. But I want to generate the code under the clicked link. I tried using $(this) but it did not work. Thanks for your help! If there is a better solution, please let me know. Also for reference, I am trying to create a reply textarea just like on Youtube when you click on the reply link it opens a textarea for the user to input text.

The sample code is available here Sample Code

Answer 1

Demo

$(".reply").one('click', function (event) {
    var html = "<div class='alpha grid_11 underVideo'><ul><li><textarea class='roundedCorners textAreaLabel' rows='4' cols='100' wrap='off' placeholder='Respond to this video...' name='CommentTextArea'></textarea></li></ul></div>";
    $(this).parent().after(html);
    return false;
});

Since there was a class .reply on the target element, I used that instead of .normalText a:last-child.

Instead of binding ‘click’ to the element, .one is used. Using .one will only fire once which will prevent adding multiple textareas.

$(this) refers to the element clicked which in this case is the a.reply element. Using .parent() will travel up the DOM and select the parent which is a span. And of course, .after(html) inserts the html after the span.

return false; does both .preventDefault(); .stopPropagation();