can not access on click function of a css

Question

I have a code like this

  <form asp-controller="Products" asp-action="AddComment" asp-route-id="@Model.Id" id="CommentForm">
     <div class=" w-100 mt-1  ml-5 mr-5  d-block">
        <div class="d-inline-block">
           <lable class="product-subtitle">Name</lable>
            <input id="Name" type="text" class="reply-comment" value="@fullname" disabled />
         </div>
         <div class="d-inline-block ">
              <lable class="product-subtitle">Email</lable>
                 <input id="Email" type="email" class="reply-comment" value="@userEmail" />
         </div>
      </div>
      <div class="mt-1  ml-5 mr-5 d-block ">
         <textarea rows="3" class="reply-comment" id="Comment" name="Comment"></textarea>
        </div>
         <div class="mt-1  ml-5 mr-5 mb-4 d-flex  justify-content-end">
            <div>
              <a class="btn btn-primary btn-buy d-flex justify-content-center add-comment" data-id="0"  data-ischild="0" style=" background-color: #425fab;width:80px; padding:10px"><span>Send</span></a>
             </div>
          </div>
     </form>

and js

 $(".add-comment").click(function () {
    //some thing happens in here

});

this works fine. and I can access .add-comment.click() function , but in somepart I have to add the textarea by javascript like this

let divStr = "<div class='w-75 d-inline-flex'><textarea id='ChildComment' class='reply-comment w-100' ></textarea></div>";
    divStr = divStr + "<div class='w-25 d-inline-flex align-bottom' style='float:left; justify-content:left;'>";        
     divStr = divStr + "<a  class='btn btn-buy d-inline add-comment' data-id='" + commentId +"' data-ischild='1'><span class='mr-1 ml-1'> Send</span></a></div>";
      $("#" + commentId).append(divStr);

but the I can not enter .add-comment.click(function()) when I make the textarea by javascript

[This](https://stackoverflow.com/questions/1525664/jquery-how-to-bind-onclick-event-to-dynamically-added-html-element) should help you (use the on method). — Urs Bo, Apr 22 '22 at 08:40
you can also use this code as well, $('body').on('click', '.add-comment', function() { //some thing happens in here }); — Midhun Lal, Apr 22 '22 at 08:46

score 2 · Accepted Answer · answered Apr 22 '22 at 08:39

Try to change


 $(".add-comment").click(function () {
    //some thing happens in here

});

into this

 $(document).on('click', '.add-comment', function() {
    //some thing happens in here

});

The first one doesn't work because the item is added after the DOM is loaded.

score -1 · Answer 2 · answered Apr 22 '22 at 08:41

-1

This is because you're trying to attach a click event onto an element that has been dynamically added. Try this:

$(document).on('click','.reply-comment',function(){//do something})

answered Apr 22 '22 at 08:41

S. Brown

41
11

Not my downvote, but taking the wording as-is "*trying to attach a click event onto an element that has been dynamically added*" - is not a problem as you *can* attach events to elements that *have been* added - ie added dynamically then event added after. The issue is the event is being added *before* the element has been added/exists. I suspect that's what you're trying to say, but as-is, it's not worded to be factually correct. – freedomn-m Apr 22 '22 at 09:09

can not access on click function of a css

2 Answers2