Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <!-- Doesn't work! -->
  <div class="button" data-bind="hasFocus: divDialogIsVisible" tabindex="0">Div</div>
  
  <!-- This Works! -->
  <button data-bind="hasFocus: buttonDialogIsVisible">Buton</button>
  
  <!-- ko if: divDialogIsVisible -->
  <div>Div Dialog Here...</div>
  <!-- /ko -->
  
  <!-- ko if: buttonDialogIsVisible -->
  <div>Button Dialog Here...</div>
  <!-- /ko -->
</body>
</html>
 
.button {
  border: 1px solid #777;
  width: 80px;
  text-align: center;
  border-radius: 7px;
  cursor: pointer;
}
 
ko.applyBindings(function() {
  this.divDialogIsVisible = ko.observable(false);
  this.buttonDialogIsVisible = ko.observable(false);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers