CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John Murray
John Murray

Reputation: 103

Setting focus to created div

so I have a button that creates a div that is both resizable and moveable and adds the div to a container. However, when I try to focus a specific div element clicked it does not focus. I think its something to do with the second click function not being executed in the java script, might be wrong though. Any tips?

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

Upvotes: 2

Views: 61

Answers (3)

aardrian
aardrian

Reputation: 9009

A <div> cannot natively accept focus as it is not an interactive element nor a form control.

You can force it to accept focus programmatically by giving it tabindex="-1" and then toggling it to tabindex="0" when you give it focus. Change it back to -1 when it loses focus and be careful not to get overzealous with tabindex.

However, if you give a non-interactive element focus, you are implying it is an interactive control, so you will also need to give it an accessible name (maybe by aria-label or aria-labeledby in this case), make sure it has focus styles, find an appropriate role so screen readers understand why it can get focus, and generally treat it like a control.

Depending on what it does, you may want to treat it as a non-modal dialog control (with keyboard interaction to match) and if it will have content that overflows, then you will want to make sure a keyboard user can get to it.

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Since newcard is generated dynamically you should use event delegation on() when you attach the click event, like :

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

Hope this helps.

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

Upvotes: 4

Dalin Huang
Dalin Huang

Reputation: 11342

you want attach event to dynamic element, you can find more info here:

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


$(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);
});
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>

Upvotes: 1

Related Questions