I am trying to get the data attribute 'status' of the button when it is clicked.

But what I get is undefined.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <button id="pendingBtn" data-status="pending">Pending</button>
  <button id="returnedBtn" data-status="returned">Returned</button>
  <button id="admittedBtn" data-status="admitted">Admitted</button>
  <button id="rejectedBtn" data-status="rejected">Rejected</button>
  <button id="allBtn" data-status="all">All</button>
</div>
<p id="print"></p>
<script>
  $(document).ready(() => {
    $(".action-buttons").find("button").on('click', () => {
      //console.log($(this).attr("data-status"));
     $("#print").text($(this).attr("data-status"));
    });
  });
</script>

CodePudding user response：

There was multiple problems with your code.

• First, you missed a . before you on('click'
• Second, this does not work with arrow functions, so you can do it like 'click', (obj) => and obj.target

Also rather than doing $(".action-buttons").find("button") you can just combine them like $(".action-buttons button")

$(document).ready(() => {
  $(".action-buttons").find("button").on('click', (obj) => {
    $("#print").text($(obj.target).attr("data-status"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <button id="pendingBtn" data-status="pending">Pending</button>
  <button id="returnedBtn" data-status="returned">Returned</button>
  <button id="admittedBtn" data-status="admitted">Admitted</button>
  <button id="rejectedBtn" data-status="rejected">Rejected</button>
  <button id="allBtn" data-status="all">All</button>
</div>
<p id="print"></p>