Remove Klasse von td, wenn die gleiche Klasse auf

Question

geklickt Ich habe eine Reihe von <td> ‚s, die die Klasse haben clickable

Wie kann ich die Klasse anklickbar nicht mehr entfernen sie anklickbar machen? Hier ist, was ich habe, aber es entfernt nicht die Klasse:

Answer 1

Der Code, den Sie haben, wird sicherlich die Klasse entfernen, aber es entfernt nicht das Klickereignis.

würde ich vorschlagen, Ihr Click-Ereignis zu modifizieren Ereignis Delegation zu verwenden, etwa so:

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

Beispiel: https://jsfiddle.net/c6eda0kj/

---

Warum Delegation Veranstaltung wichtig ist:

Doing etwas wie $('.clickable').click(...) erzeugt einen Listener für jede Instanz von clickable. Wenn es 100 .clickable tds gibt, sind das 100 Listener, die Sie gerade erstellt haben. Unabhängig davon, ob Sie die Klasse aus diesen 100 Elementen entfernen oder nicht, ist das Ereignis bereits angehängt. Um das Ereignis zu entfernen, müssen Sie unbind oder off verwenden.

Wenn Sie stattdessen den Hörer auf die table setzen, wie ich oben habe, haben Sie nur ein einzelnes Ereignis. Wenn dieses Ereignis ausgelöst wird (der Klick auf table), wird überprüft, ob das angeklickte Element mit dem angegebenen Selektor übereinstimmt. Durch das Entfernen der Klasse wird das Ereignis nicht mehr ausgelöst. Es muss keine Bindung mehr aufgehoben werden.

Answer 2

Als @isherwood Verwendung erwähnt off() statt unbind()

hier ein Beispiel:

$('.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>

Answer 3

Wenn Sie das Element auswählen, fügt es die Veranstaltung. Wenn das Ereignis nicht entfernt wird, weil Sie die Klasse entfernen. Sie haben zwei Möglichkeiten. Entfernen Sie das Klickereignis. Eine andere Option ist die Ereignisdelegierung.

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

oder

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