Question

我有一堆<td>个有clickable

的课程

如何删除可点击的课程，使其不再可点击？这是我所拥有的，但它不会删除该类：

    $('td.clickable').click(function(){ 
        $(this).removeClass('clickable');
});

Answer 1

您拥有的代码肯定会删除该类，但它不会删除点击事件。

我建议修改您的点击事件以使用事件委托，如下所示：

$('table').on("click", ".clickable", function(){ 
    $(this).removeClass('clickable');
});

示例：https://jsfiddle.net/c6eda0kj/

为什么事件委派很重要：

执行$('.clickable').click( ... )之类的操作会为clickable的每个实例创建一个侦听器。如果有100个.clickable td，那么您刚刚创建了100个听众。无论您是否从这100个元素中删除该类，该事件都已附加。要删除该活动，您必须使用unbind或off。

如果你把听众放在table上，就像我上面那样，你只有一个单个事件。当该事件触发时（点击table），它会检查被点击的元素是否与指定的选择器匹配。通过删除类，它将不再触发事件 - 不需要解除任何类型的绑定。

Answer 2

选择元素时，会添加事件。因为删除该类而未删除该事件。你有两个选择。删除click事件。其他选择是事件委托。

$('td.clickable').click(function(){ 
    $(this).removeClass('clickable').off("click");
});

或

$("table").on("click", 'td.clickable', function(){ 
    $(this).removeClass('clickable');
});

Answer 3

正如@isherwood所提到的，使用off()代替unbind()

这是一个例子：

$('.clickable').click(function(){ 
  console.log($(this).text());
  $(this).off();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td class="clickable">Alfreds Futterkiste</td>
    <td class="clickable">Maria Anders</td>
    <td class="clickable">Germany</td>
  </tr>
  <tr>
    <td class="clickable">Centro comercial Moctezuma</td>
    <td class="clickable">Francisco Chang</td>
    <td class="clickable">Mexico</td>
  </tr>
</table>

单击同一个类时从td中删除类

3 个答案: