gpt4 book ai didi

javascript - jQuery 递归脚本仅适用于第一个元素

转载 作者:行者123 更新时间:2023-11-30 12:25:49 26 4
gpt4 key购买 nike

我试图让自己成为一个 jQuery 脚本,每次我点击一个以前创建的框时都会添加一个框,但它并没有像我期望的那样工作。当我单击第一个“单击我”框时(这很棒),它会添加很多框,但是当我单击其他框时,它不会执行任何操作。这是我的代码:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

body {
font-family: Avenir;
}

h1,h2,h3,h4,h5,h6 {
font-weight: 600;
}

.center {
margin: 0 auto;
text-align: center;
width: 380px;
}

.box {
background: #F7F7F7;
width: 380px;
height: 80px;
border: 1px solid #D5D5D5;
box-shadow: 0 0 5px #BABABA;
font-family: inherit;
font-size: inherit;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
<div class="center">
<button class="box">CLICK ME</button>
</div>
<script type="text/javascript">

$("button").on("click", function() {
$(".center").append("<button class=\"box\">CLICK ME</button>");
});

</script>
</body>

最佳答案

您的语法有点不对,我认为这就是它过去使用 live 的方式,但是 on 的行为略有不同以获得更好的性能。在这里查看它的实际效果:

$("body").on("click", "button", function() {
$(".center").append("<button class=\"box\">CLICK ME</button>");
});
.center {
margin: 0 auto;
text-align: center;
width: 380px;
}
.box {
background: #F7F7F7;
width: 380px;
height: 80px;
border: 1px solid #D5D5D5;
box-shadow: 0 0 5px #BABABA;
font-family: inherit;
font-size: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<button class="box">CLICK ME</button>
</div>

关于javascript - jQuery 递归脚本仅适用于第一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29423900/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com