Javascript jQuery递归脚本只对第一个元素有效_Javascript_Jquery_Html

Javascript jQuery递归脚本只对第一个元素有效

javascript jquery html

Javascript jQuery递归脚本只对第一个元素有效,javascript,jquery,html,Javascript,Jquery,Html,我试图为自己制作一个jQuery脚本，每次单击以前制作的框时都会添加一个框，但它并没有按照我预期的方式工作。当我单击第一个“单击我”框时，它会添加很多框（这很好），但当我单击其他框时，它什么也不做。这是我的代码： <!DOCTYPE html> <html> <head> <style type="text/css"> body { font-family: Avenir; }

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


身体{
字体系列：Avenir；
}
h1、h2、h3、h4、h5、h6{
字号：600；
}
.中心{
保证金：0自动；
文本对齐：居中；
宽度：380px；
}
.盒子{
背景：#F7F7F7；
宽度：380px；
高度：80px；
边框：1px实心#d5d5；
盒影：0 0 5px#BABABA；
字体家族：继承；
字体大小：继承；
}
点击我
$（“按钮”）。在（“单击”，函数（）{
$（“.center”）.append（“单击我”）；
});

您的语法有点不正确，我想这就是以前在

live

中使用的语法，但是

on

的行为稍有不同，以获得更好的性能。请在此处查看它的实际操作：

$（“body”）。在（“单击”，“按钮”，函数（）{
$（“.center”）.append（“单击我”）；
});
.center{
保证金：0自动；
文本对齐：居中；
宽度：380px；
}
.盒子{
背景：#F7F7F7；
宽度：380px；
高度：80px；
边框：1px实心#d5d5；
盒影：0 0 5px#BABABA；
字体家族：继承；
字体大小：继承；
}

点击我
由于分配事件时页面上没有新按钮，因此需要使用：
$（“body”）。在（“单击”，“按钮”，函数（）{
$（“.center”）.append（“单击我”）；
});
您遇到的问题是，在首次绘制DOM时，后续按钮不存在。您需要升级一级，然后让函数查找查找下一步按钮，从而执行您想要执行的代码
您的代码应该如下所示：
$（.center”）。在（“单击”，“按钮”，函数（）上）{
$（“.center”）.append（“单击我”）；
});
一旦添加了其他按钮，它们中的任何一个都会添加一个新按钮。
没问题（我现在给了你几分），我只是不喜欢dave所做的。欢迎使用Stack Overflow，祝您的项目好运！：）再次感谢，我很高兴我遇到了像你这样的人！我很高兴删除我的答案，如果你至少提到活动授权以及为什么有必要，我会投你的票。@dave不用担心，我不在乎代表积分，我只是不喜欢你要求接受。请保留你的答案（给你一张赞成票）。至于我为什么没有提到事件委派，是因为我假设OP知道这一点，并且他只是使用了一种旧的jQ语法，这种语法适用于live@Shomz fair。很抱歉+1.
$("body").on("click", "button", function() {
  $(".center").append("<button class=\"box\">CLICK ME</button>");
});