将焦点设置为创建的div

时间：2017-04-12 17:40:11

标签： javascript jquery html html5 css3

所以我有一个按钮，可以创建一个可调整大小和可移动的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>

3 个答案:

答案 0 :(得分：4)

由于newcard是动态生成的，因此在附加click事件时应使用事件委派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>

答案 1 :(得分：1)

您希望将事件附加到动态元素，您可以在此处找到更多信息：

In jQuery, how to attach events to dynamic html elements? 

$('body').on('click', '.newcard', function(){
    $(this).siblings(this).css('z-index', 10);
    $(this).css('z-index', 11);
});

＆＃13;
＆＃13; 
$(function(){
	$(".createcard").click(function() {
		var domElement = $('<div class="newcard"></div>');
		$('.notecard-container').append(domElement);

		$('.newcard')
		.draggable()		
		.resizable();
	});

});

$('body').on('click', '.newcard', function(){
    $(this).siblings(this).css('z-index', 10);
    $(this).css('z-index', 11);
});
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

<div>无法原生接受焦点，因为它不是interactive element也不是form control。

您可以强制它以编程方式接受焦点，方法是给它tabindex="-1"，然后在给予焦点时将其切换到tabindex="0"。当它失去焦点时将其更改回-1并小心not to get overzealous with tabindex。

但是，如果你给一个非交互式元素焦点，你暗示它是一个交互式控件，所以你还需要给它一个accessible name（可能是aria-label或{{3在这种情况下），确保它有aria-labeledby，focus styles，以便屏幕阅读器理解为什么它可以获得焦点，并且通常将其视为控件。

根据其功能，您可能希望将其视为find an appropriate role控件（要匹配键盘交互），如果内容溢出，则需要non-modal dialog。

相关问题
最新问题