Javascript函数仅适用于第一次调用

Question

I'm developing a Question&Answer website in php and I want to print the answer comments when I press the button. Everything works like a charm but only on the first button. I have an idea why this does't work, I guess it only takes into account the first id that it finds.

So , my question is, is there any way to name the element I want to call based on its id? For example:

<button class="btn icon-chat" title="Add a comment on this answer"
                        type="button" id="showarea . {answer['answerid']"} name="showarea" value="Show Textarea">
                    Comment</button>
<div id="textarea">
                    {include file="comment_form.tpl"}
                </div>

But how would I call this PHP variable on my JS function?

$("#textarea, #textarea-ok").hide(); // or you can have hidden w/ CSS
$("#showarea").click(function(){
    $("#textarea").show();
});
$("#textarea-ok, #cancel").click(function(){
    $("#textarea").hide();
});

Is this the best approach? Any advise regarding to the JS code you can give?

Kind Regards

Answer 1

Live method should be ok

$("body").on("click", ".myClass", function(){
    // do it again // or #myId
});

Don't forget about an event with an Id selector can be only on one element, and class on every one...

Edit with example

<div class="post-button clearfix">
    // i changed this button as well
    <button class="btn icon-chat show-textarea" title="Add a comment on this answer" type="button" data-answer="{$answer['publicationid']}">Comment</button>

    <div class="textarea">
        {include file="comment_form.tpl"}
    </div>
</div>


// comment_form.tpl

// i added a master container
<div class="comment-form">
    <form method="post" action="{$BASE_URL}controller/actions/comments/create_comment.php">
        <textarea name="comment" rows="4" cols="40" class="qa-form-tall-text"></textarea>

        // i deleted the wrong input here
        <input type="hidden" name="answerid" value="{$answer['answerid']}" />
        <input type="hidden" name="questionid" value="{$question['publicationid']}" />

        // i changed these 2 buttons as well
        <button type="button" class="textarea-cancel qa-form-tall-button qa-form-tall-button-comment">Cancel</button>
        <button type="submit" class="textarea-ok">Ok</button>
    </form>
</div>

Then you change the script with class in selector like :

...

$('.comment-form').hide();

$("body").on("click", ".show-textarea", function(){
    $('.comment-form').show();
});

$("body").on("click", ".textarea-ok, .textarea-cancel", function(){
    $('.comment-form').hide();
});

....

More about Jquery Selector : https://www.w3schools.com/jquery/jquery_ref_selectors.asp

More about live method wit .on() : https://www.w3schools.com/jquery/event_on.asp

More about Html forms https://www.w3schools.com/html/html_forms.asp

Read these docs to be ok with yourself ;)