Setting focus to created div

Question

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>

Zakaria Acharki · Answer 1 · 2017-04-12T18:05:42.430

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>

score 1 · Answer 2 · edited May 23 '17 at 11:46

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>

Thank you for a working solution! p.s. VERY good article attached, just read it. — John Murray, Apr 12 '17 at 18:02

aardrian · Answer 3 · 2017-04-12T21:35:54.277

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.

Setting focus to created div

3 Answers3