Knocout Bootstrap3.3.6 popover

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-debug.js"></script>
<body data-bind="click: popoverIsOpen.bind($data, false)">
  <div class="division">
    <button data-bind="popover:{template:'settingsPopover',placement:'top', open:popoverIsOpen}">settings</button>
  </div>

  <script type="text/html" id="settingsPopover">
    <div data-bind="text: $data.exampleText, click: function (d,e) {e.stopPropagation();}" type="text"> </div>
  </script>
</body>

CSS

body {
  background-color: #fdd;
  height: 30rem;
}
.division {
  margin: 0 auto;
  width: 200px;
  display: block;
}

JavaScript

var guid = (function(s4) {
  return function() {
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
  };
})(function() {
  return Math.floor((1 + Math.random()) * 0x10000)
    .toString(16)
    .substring(1);
});

// Outer HTML
if (!$.fn.outerHtml) {
  $.fn.outerHtml = function() {
    if (this.length === 0) {
      return false;
    }
    var elem = this[0],
      name = elem.tagName.toLowerCase();
    if (elem.outerHTML) {
      return elem.outerHTML;
    }
    var attrs = $.map(elem.attributes, function(i) {
      return i.name + '="' + i.value + '"';
    });
    return "<" + name + (attrs.length > 0 ? " " + attrs.join(" ") : "") + ">" + elem.innerHTML + "</" + name + ">";
  };
}


// Bind Bootstrap Popover
ko.bindingHandlers.popover = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var $element = $(element);
    var popoverBindingValues = ko.utils.unwrapObservable(valueAccessor());
    var template = popoverBindingValues.template || false;
    var options = popoverBindingValues.options || {
      title: 'popover',
      placement: 'bottom'
    };
    var openControl = popoverBindingValues.open;
    var data = popoverBindingValues.data || false;
    var controlDescendants = popoverBindingValues.controlDescendants;
    if (template !== false) {
      if (data) {
        options.content = "<!-- ko template: { name: template, if: data, data: data } --><!-- /ko -->";
      } else {
        options.content = $('#' + template).html();
      }
      options.html = true;
    }
    openControl.subscribe(function (newValue) {
      console.debug("Now", newValue);
    	if (!newValue) {
        $element.prop('disabled', false);
      	$element.click();
      }
    });
    $element.on('shown.bs.popover', function(event) {
      $element.prop('disabled', true);
      openControl(true);
      var popoverData = $(event.target).data();
      var popoverEl = popoverData['bs.popover'].$tip;
 ...