Question

我试图让自己成为一个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>

Answer 1

您的语法有点偏差，我认为它是如何在当天使用live的方式，但on行为略有不同以获得更好的性能。在这里看到它：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

由于在分配事件时您的新按钮不在页面上，因此您需要使用event delegation：

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

Answer 3

您遇到的问题是，在首次绘制DOM时，后续按钮不存在。你需要向上一级，然后让函数看起来找到下一个按钮，然后执行你想要执行的代码。

您的代码应如下所示：

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

添加其他按钮后，其中任何一个按钮都会添加一个新按钮。

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

3 个答案: