所以我有一个按钮，可以创建一个可调整大小且可移动的 div，并将该 div 添加到容器中。但是，当我尝试聚焦某个特定的 div 元素时，单击它不会聚焦。我认为这与 java 脚本中没有执行第二个单击函数有关，但可能是错误的。有什么建议吗？
$(function(){
$(".createcard").click(function() {
var domElement = $('<div class="newcard"></div>');
$('.notecard-container').append(domElement);
$('.newcard')
.draggable()
.resizable();
});
$('.newcard').click(function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
});body, html {
margin: 0;
padding: 0;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
}
.createcard {
bottom: 5%;
left: 5%;
width: 125px;
height: 45px;
background: rgba(255, 255, 255, 0);
position: absolute;
display: block;
border: 1px solid transparent;
outline: none;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
transition: .4s;
}
.createcard:hover {
background: rgba(255, 255, 255, .9);
border-radius: 5px;
border: 1px solid #c0c0c0;
transition: .4s;
}
.newcard{
position: absolute;
width: 150px;
height: 150px;
min-width:150px;
min-height:150px;
max-width:300px;
max-height:300px;
top:10%;
left:10%;
background: white;
border: 1px gray solid;
z-index:100;
}
.notecard-container {
position: absolute;
top: 7%;
left: 2%;
right: 2%;
bottom: 2%;
background: rgb(255, 228, 181);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="index.css">
<meta charset="ISO-8859-1">
<title>Post-it note</title>
</head>
<body>
<div class="container">
<div class="notecard-container">
<button class="createcard">New Card</button>
</div>
</div>
<!-- Input JavaScript and jQuery -->
<script src="js/jquery-3.2.0.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>最佳答案
由于 newcard 是动态生成的，因此在附加点击事件时应使用事件委托(delegate) on()，例如:
$('.body').on('click', '.newcard', function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
希望这有帮助。
$(function(){
$(".createcard").click(function() {
var domElement = $('<div class="newcard"></div>');
$('.notecard-container').append(domElement);
$('.newcard').draggable().resizable();
});
$('.newcard').click(function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
});body, html {
margin: 0;
padding: 0;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
}
.createcard {
bottom: 5%;
left: 5%;
width: 125px;
height: 45px;
background: rgba(255, 255, 255, 0);
position: absolute;
display: block;
border: 1px solid transparent;
outline: none;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
transition: .4s;
}
.createcard:hover {
background: rgba(255, 255, 255, .9);
border-radius: 5px;
border: 1px solid #c0c0c0;
transition: .4s;
}
.newcard{
position: absolute;
width: 150px;
height: 150px;
min-width:150px;
min-height:150px;
max-width:300px;
max-height:300px;
top:10%;
left:10%;
background: white;
border: 1px gray solid;
z-index:100;
}
.notecard-container {
position: absolute;
top: 7%;
left: 2%;
right: 2%;
bottom: 2%;
background: rgb(255, 228, 181);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"><script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div class="notecard-container">
<button class="createcard">New Card</button>
</div>
</div>关于javascript - 将焦点设置到创建的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43376204/