javascript - 删除jquery函数中的类

Question

我遇到的问题是，如果我在单击删除按钮后立即单击结帐按钮，即使我已经有了 $(".blueClass").removeClass(' classOne'); 在 jquery 函数上。我想要完成的是，当我单击“删除”时，当我单击“结帐”时，该框不应更改其颜色，除非再次单击该框。完整的源代码位于下面的链接中。

$( document ).ready(function() {
    $(".boxes" ).click(function() {
  		$(this).addClass('classOne');
	});

	$(".btn-primary").click(function(){
		$(".classOne").addClass('blueClass');
		$(".classOne").append("<div class='wraps'><br><strong>Ordered</strong>");
		$(".classOne").append("<br><button type='button' class='btn btn-info'>Remove</button></div>");
		$(".blueClass").removeClass('classOne');

		$(".btn-info").click(function(){
			$(this).parent().removeClass('blueClass classOne').empty('');
		});
		
	});

});

.leftbox{
	min-height: 100%;
}
.rightbox{
	min-height: 100%;
}
.boxes{
	border: 1px solid black;
	border-radius: 10px;
	min-height: 9em;
	float: left;
	margin: 1em 1em 1em 1em;
	width: 100%; 
}
.wrapper{
	padding-top: 1em;
}
.btn-holder{
	margin-top: 3em;
}

.redClass{
	background-color: red;
}
.greenClass{
	background-color: green;
}
.yellowClass{
	background-color: yellow;
}
.blueClass{
	background-color: blue;
}
.rightbox input{
	width:50%;
	float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" col-md-3 text-center">
						Item 11
					<div class="boxes text-center">
						
					</div>
				
				</div>

<div class=" col-md-3 text-center">
						Item 12
					<div class="boxes text-center">
						
					</div>
				</div>
				</div>

<button type="button" class="btn btn-primary">Checkout</button>

Answer 1

当点击.btn-info时，事件冒泡到.boxes元素，然后触发监听器添加再次.classOne:

$(".boxes" ).click(function() {
    $(this).addClass('classOne');
})

您想停止冒泡，只需在 .btn-info 点击监听器中添加 event.stopPropagation 即可:

$(".btn-info").click(function(e){
    e.stopPropagation();
    $(this).parent()
        .removeClass('blueClass classOne')
        .empty('');
});

顺便说一句，将监听器添加到 .btn-primary 点击回调之外的文档(如 @Ankit Agarwal 状态)是一种更好的设计，因为您一次只会添加一个监听器，而不是每次添加单击结帐按钮的时间。

编辑

<小时/>

我认为更合适的解决方案是，如果您不想停止事件传播，这可能会给您带来麻烦，例如您想监听整个文档的一些“常规点击”，您可以检查 event.target在 .boxes 回调中，并删除 .btn-info 回调中的 event.stopPropagation 部分:

$(".boxes").click(function(e) {
  if(event.target === this)
      $(this).addClass('classOne');
});

$(".btn-info").click(function(){
    $(this).parent()
        .removeClass('blueClass classOne')
        .empty('');
});