javascript - jQuery 添加一个类但不会删除一个

Question

当您单击 .extra anchor 时，它会添加“extra-active”类并删除“extra”类，但是当您单击 extra-active anchor 时，它拒绝删除 extra-active 类并将其替换为 extra .

这是 HTML

	$("a.extra").click(function(e){
		$(this).addClass("extra-active").removeClass("extra");
		e.preventDefault();
	})

	$("a.extra-active").click(function(e){
		$(this).removeClass("extra-active").addClass("extra");
		e.preventDefault();
	})

.extra{
	display:inline-block;
	height: 128px;
	width: 128px;

	background-color:grey;
	padding:12px;
	border-radius:8px;
}

.extra-group{
	p {
		text-align:center;
	}
}


.extra:hover{
	background-color:blue;
}

.extra-active{
	display:inline-block;
	height: 128px;
	width: 128px;

	background-color:red !important;
	padding:12px;
	border-radius:8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="display:inline-block;">
	<span class="extra-group">
		<a class="extra" href="" title = "An hour of Ironing" id="extra-ironing" style = "background-image: url('{{ url_for('static', filename='book-icons/iron-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>An Hours Ironing</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "Inside the Fridge" id="extra-fridge"  style = "background-image: url('{{ url_for('static', filename='book-icons/fridge-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Inside the Fridge</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "Inside the Oven" id="extra-oven"  style = "background-image: url('{{ url_for('static', filename='book-icons/oven-icon.png') }}'); background-size: 80% 80%;; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Inside the Oven</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "A load of Washing" id="extra-washing" style = "background-image: url('{{ url_for('static', filename='book-icons/washer-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>A load of Washing</p>
	</span>
	<span class="extra-group">
		<a class="extra " href="" title = "Interior Windows" id="extra-windows" style = "background-image: url('{{ url_for('static', filename='book-icons/window-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Interior Windows</p>
	</span>
</span>

Answer 1

扩展@xandercoded 的贡献，我向主体添加了一个监听器，然后更新了 on 函数的目标。

	$("body").on('click','.extra',function(e){
		$(e.target).addClass("extra-active").removeClass("extra");
		e.preventDefault();
	})

	$("body").on('click','.extra-active',function(e){
		$(e.target).removeClass("extra-active").addClass("extra");
		e.preventDefault();
	})

.extra{
	display:inline-block;
	height: 128px;
	width: 128px;

	background-color:grey;
	padding:12px;
	border-radius:8px;
}

.extra-group{
	p {
		text-align:center;
	}
}


.extra:hover{
	background-color:blue;
}

.extra-active{
	display:inline-block;
	height: 128px;
	width: 128px;

	background-color:red !important;
	padding:12px;
	border-radius:8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="display:inline-block;">
	<span class="extra-group">
		<a class="extra" href="" title = "An hour of Ironing" id="extra-ironing" style = "background-image: url('{{ url_for('static', filename='book-icons/iron-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>An Hours Ironing</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "Inside the Fridge" id="extra-fridge"  style = "background-image: url('{{ url_for('static', filename='book-icons/fridge-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Inside the Fridge</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "Inside the Oven" id="extra-oven"  style = "background-image: url('{{ url_for('static', filename='book-icons/oven-icon.png') }}'); background-size: 80% 80%;; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Inside the Oven</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "A load of Washing" id="extra-washing" style = "background-image: url('{{ url_for('static', filename='book-icons/washer-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>A load of Washing</p>
	</span>
	<span class="extra-group">
		<a class="extra " href="" title = "Interior Windows" id="extra-windows" style = "background-image: url('{{ url_for('static', filename='book-icons/window-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Interior Windows</p>
	</span>
</span>