仅在某行绑定事件

Question

实际上，我在 table

的所有 tr 上绑定了一个 dblclick 事件

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

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

是否可以绑定 dblclick event only on row where data-status != COMPLETED`？

Answer 1

一个解决方案是：

您可以在创建 html 时将公共 class 添加到所有数据状态已完成的 tr ..因此您可以直接从 class[=10= 定义 dblclick 事件]

第二种解决方案：

在 dblclick 事件中你可以检查数据状态是否完成然后 return false;

Answer 2

试试这个..

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

Answer 3

使用:has() selector with an 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>

仅在某行绑定事件

Bind event on some row only

javascript

jquery

jquery-events