У меня есть группа <td>, которые имеют класс clickable

Как я могу удалить кликабельный класс, чтобы больше не делать его кликабельным? Вот что у меня есть, но это не удаляет класс:

    $('td.clickable').click(function(){ 
        $(this).removeClass('clickable');
});
1
patricko 12 Янв 2017 в 23:30

3 ответа

Лучший ответ

Код, который у вас есть, безусловно, удалит класс, но не удалит событие click.

Я бы предложил изменить событие click, чтобы использовать делегирование события, например так:

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

Пример: https://jsfiddle.net/c6eda0kj/


Почему делегирование мероприятия важно:

Выполнение чего-то вроде $('.clickable').click( ... ) создает слушателя для каждого экземпляра clickable. Если есть 100 .clickable тд, это 100 слушателей, которых вы только что создали. Независимо от того, удаляете ли вы класс из этих 100 элементов, событие уже прикреплено. Чтобы удалить событие, вам нужно использовать unbind или off.

Если вы вместо этого поместите прослушиватель в table, как я описал выше, у вас будет только одно единственное событие. Когда происходит это событие (щелчок table), он проверяет, соответствует ли выбранный элемент указанному селектору. Удалив класс, он больше не будет вызывать событие - нет необходимости в какой-либо привязке.

4
Tyler Roper 12 Янв 2017 в 21:03

Как упоминалось в @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>
1
ppasler 12 Янв 2017 в 20:35

Когда вы выбираете элемент, он добавляет событие. Когда событие не удаляется, потому что вы удаляете класс. У вас есть два варианта. Удалить событие клика. Другой вариант - делегирование события.

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

Или

$("table").on("click", 'td.clickable', function(){ 
    $(this).removeClass('clickable');
});
3
epascarello 12 Янв 2017 в 20:35