CODEWITHSUNDEEP
javascriptjqueryjquery-events
robert gagnon
robert gagnon

Reputation: 311

Bind event on some row only

Actually, I bind a dblclick event on all tr of the table

$('#memberPaymentTableResult tr').bind("dblclick", null, memberPaymentSelectedRow);

Structure of my table:

<tr>    
    <td data-payment-id={{paymentId}}>{{paymentId}}</td>
    <td data-contract-id={{contractId}}>{{contractId}}</td>
    <td>{{replace price "." ","}}</td>
    <td>{{moment date "L"}}</td>
    <td data-status={{status}}>
</tr>

Is it possible to bind dblclick event only on row where data-status != COMPLETED`?

Upvotes: 0

Views: 35

Answers (3)

epascarello
epascarello

Reputation: 207527

Use :has() selector with an not attribute selector and add less events with event delegation

$("#memberPaymentTableResult").on("click", 'tr:has(td[data-status!="COMPLETED"])', function () {
    $(this).toggleClass("selected");
});
.selected td { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="memberPaymentTableResult">
  <tbody>
    <tr>
      <td data-status="xxxx">No</td>
    </tr>
    <tr>
      <td data-status="COMPLETED">Yes</td>
    </tr>
    <tr>
      <td data-status="COMPLETED">Yes</td>
    </tr>
    <tr>
      <td data-status="xxxx">No</td>
    </tr>    
  </tbody>
</table>

Upvotes: 1

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

Try this..

$('#memberPaymentTableResult tr[data-status!="COMPLETED"]').bind("dblclick", null, memberPaymentSelectedRow);

Upvotes: 0

Dhara Parmar
Dhara Parmar

Reputation: 8101

One solution is:

You can add common class to all tr which have data-status completed while creating html..so you can directly define dblclick event from that class

Second solution:

In dblclick event you can check if data-status is completed then return false;

Upvotes: 1

Related Questions