pass parameter to click event of a class

user_1379478 0
Viewed 283

I have this code

<div style="float:left">
  <div class="d-inline ">
    <i id="reply@{@item.Id}" class="bi bi-reply icon-cursor test-comment" onclick="CommentReply(@item.Id)"></i>
  </div>                            
</div>

and js

 function CommentReply(id)
 {
    //to do something
 }

but I want to change to

  $(".test-comment").click(function () {
    //to do something

    // I need Id in here
})

how can I pass the Id parameter to test-comment click event?

jquery javascript
2 Answers

Try with data attributes: test code here

HTML

<div style="float:left">
  <div class="d-inline ">
    <i data-id="10" data-xx="other x" class="bi bi-reply icon-cursor test-comment" >some text</i> 
  </div>
</div>

Remove onclick= ... and use data-* for your info.

JS

$(".test-comment").click(function () {
    alert($(this).data("id"));
    alert($(this).data("xx"));
})

snippet <3

$(".test-comment").click(function () {
    alert($(this).data("id"));
    alert($(this).data("xx"));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="float:left">
  <div class="d-inline ">
    <i data-id="10" data-xx="other x" class="bi bi-reply icon-cursor test-comment" >CLICK ME!</i> 
  </div>
</div>

user_8952790

With this in plain JS, added helloo just for testing

function CommentReply(el){
  //  `el` here is `this` passed from `onclick` is the reference to the element
  console.log(el.id);
}
<div style="float:left">
  <div class="d-inline ">
    <i id="reply@{@item.Id}" class="bi bi-reply icon-cursor test-comment" onclick="CommentReply(this)">helloo</i>
  </div>                            
</div>

click on helloo and see console for id

user_117375960
Related