仅在某些行上绑定事件

Question

实际上，我在表的所有tr上绑定了一个dblclick事件

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

我桌子的结构

<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>

是否可以仅在data-status！= COMPLETED的行上绑定dblclick事件？

Answer 1

一个解决方案是：

您可以在创建html时为所有已完成数据状态的tr添加公共类。因此您可以直接从该类定义dblclick事件

第二个解决方案：

在dblclick事件中，您可以检查数据状态是否已完成，然后返回false;

Answer 2

将:has() selector与not attribute selector一起使用，并使用事件委派添加更少的事件

$("#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>

Answer 3

试试这个..

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