所以我有一段简单的代码。没有什么严重的，或者危及生命的。我只是尝试使用 JavaScript 通过单击创建的最后一个元素来使用一些基本的 100x100 元素填充一个空的 html 文件。问题是:我实际上无法让我的代码注册创建的最后一个元素，只能注册最后一个初始元素。我可能做错了什么？
<!DOCTYPE html>
<html>
<head>
<title>Container Rainbow</title>
<style type="text/css">
div{ width:100px;height:100px; }
#head{ background-color:rgba(100,0,100,.8);}
#wrapper{width:100%;height:auto;}
div#wrapper > div{float:left;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var lastDiv;
var rgba = new Array();
rgba[0] = 110; rgba[1] = 0; rgba[2] = 110; rgba[3] = 1;
$(document).ready(function(){
lastDiv = $("div").last();
lastDiv.on("click", function(){
rgba[0] += 5;
rgba[2] += 5;
var newDiv = $("<div></div>")
.addClass("hatchling")
.css("background-color", "rgba("+rgba[0]+",0,"+rgba[2]+",1)")
$(this).after(newDiv);
lastDiv=newDiv;
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="head"></div>
</div>
</body>
</html>
最佳答案
这是您可以使用的代码和 jsfiddle 演示其工作原理 http://jsfiddle.net/krasimir/K2dyd/
var lastDiv;
var rgba = new Array();
rgba[0] = 110; rgba[1] = 0; rgba[2] = 110; rgba[3] = 1;
var divClick = function() {
rgba[0] += 5;
rgba[2] += 5;
var newDiv = $("<div></div>")
.addClass("hatchling")
.css("background-color", "rgba("+rgba[0]+",0,"+rgba[2]+",1)")
$(this).after(newDiv);
lastDiv.off("click");
lastDiv=newDiv;
lastDiv.on("click", divClick);
}
lastDiv = $("div").last();
lastDiv.on("click", divClick);
这个想法是将onclick事件附加到最新的div。在代码中，您创建 div 并将其分配给 lastDiv，但没有附加事件处理程序。
关于javascript - 使用 JQuery 选择最后添加的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18806820/