Jquery Element类没有't存在，但事件仍然发生

Jquery Element class doesn't exists but event still fires

本文关键字：事件 存在 Element Jquery      更新时间：2023-09-26

我有这段代码。

当点击按钮时，红色、绿色和蓝色必须按顺序显示，但点击事件直接传播到蓝色而没有绿色。当我使用e.stopproagation时，jQuery事件侦听器仍然附加到不存在的元素类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basket | Placelyrics</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="index.css">
    <script src="jquery.js"></script>
    <script src="a.js"></script>
    <script>
        $(document).ready(function(){
            $('.div1shown').click(function(event){
                $('.red').hide();
                $('.green').show();
                $(this).removeClass('div1shown').addClass('div2shown');
                console.log('a');
                
            });
            $('.container').delegate('.div2shown', 'click', function(event) {
                $('.green').hide();
                $('.blue').show();
                $(this).removeClass('div2shown').addClass('div3shown');
                console.log('b');
            });
        });
    </script>
    <style>
        .box{
            width:200px;
            height:200px;
            display: block;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
            display:none;
        }
        .blue{
            background-color: blue;
            display:none;
        }
    </style>
</head>
<body>
<div class="container">
        <div class="box red">
            
        </div>
        <div class="box green">
            
        </div>
        <div class="box blue">
            
        </div>
        <button class="div1shown">submit</button>
</div>
</body>
</html>

您需要将事件委派用于第一个事件处理程序，也用于

$(document).ready(function() {
  $('.container').delegate('.div1shown', 'click', function(event) {
    $('.red').hide();
    $('.green').show();
    $(this).removeClass('div1shown').addClass('div2shown');
    console.log('a');
  });
  $('.container').delegate('.div2shown', 'click', function(event) {
    $('.green').hide();
    $('.blue').show();
    $(this).removeClass('div2shown').addClass('div3shown');
    console.log('b');
  });
});
.box {
  width: 200px;
  height: 200px;
  display: block;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
  display: none;
}
.blue {
  background-color: blue;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="box red">
  </div>
  <div class="box green">
  </div>
  <div class="box blue">
  </div>
  <button class="div1shown">submit</button>
</div>

当您像在第一种情况中所做的那样使用普通事件处理程序注册时，在注册阶段只对选择器求值一次，之后再也不会对选择器求值，这就是为什么即使在更改类之后，也会执行第一个处理程序。但是，当您使用委托的事件处理程序时，目标元素选择器会延迟执行，这样它就可以适应后期发生在元素上的更改。

您想要的是按钮、悬停和活动
你只能使用这样的css来进行

     input[type=submit] {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    width: 80px;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FF4D4D),
        to(#FF0000));
    background-image: -moz-linear-gradient(top left 90deg,#FF4D4D 0%, #FF0000 100%);
    background-image: linear-gr
        madient(top left 90deg, #FF4D4D 0%, #FF0000 100%);
    border-radius: 30px;
    border: 1px solid #FF0000;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0
        rgba(255, 255, 255, .5);
    cursor: pointer;
}
input[type=submit]:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4DB870),
        to(#009933));
    background-image: -moz-linear-gradient(top left 90deg, #4DB870 0%, #009933 100%);
    background-image: linear-gradient(top left 90deg, #4DB870 0%, #009933 100%);
}
input[type=submit]:active{
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8),
        to(#b6e2ff));
    background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
    background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}


        $(document).ready(function () {
  
	  	  $('.div1shown').click(function(){
			
			var inpVal = $(".div1shown").val();
			
			
			if(inpVal==1){
				$('.red').hide();
				$('.green').show();
				$(".div1shown").val(2);
				
			}else if(inpVal==2){
				
				$('.green').hide();
				$('.blue').show();
				$(".div1shown").val(3);
				
			}else if(inpVal==3){
				
				$('.blue').hide();
				$('.red').show();
				$(".div1shown").val(1);
			}
			
		  	
	    	});
	
		
	});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basket | Placelyrics</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   
    <style>
        .box{
            width:200px;
            height:200px;
            display: block;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
            display:none;
        }
        .blue{
            background-color: blue;
            display:none;
        }
    </style>
</head>
<body>
<div class="container">
        <div class="box red">
        </div>
        <div class="box green">
        </div>
        <div class="box blue">
        </div>
        <button class="div1shown" value="1">submit</button>
</div>
</body>
</html>

相关文章：