Css 当用户在div之外单击时，如何隐藏div？

在下面的代码中，我试图在用户单击文本字段时显示ul元素，并在用户单击div之外的某个位置时将其隐藏，除了一个问题之外，它工作得很好。ul元素将被隐藏，我单击了一个标记元素（共享我的位置），但在控制台中没有得到坐标。你知道我的错在哪里吗

HTML代码：

<div id="location">
      <input id="where" type="text" maxlength="100" name="r" />
      <hr>
      <ul class="location-popup">
        <li>
          <a id="#share">&nbsp;Share my Location</a>
        </li>
      </ul>
</div>

Jquery代码：

    $(function() {
      $('#share').click(function() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(location) {
            console.log(location.coords.latitude);
            console.log(location.coords.longitude);
            console.log(location.coords.accuracy);
          });
        } else {
          console.log("Geolocation is not supported by this browser.");
        }
      });

      $("#where").click(function() {
        $('.location-popup').show();
        $('hr').show();
      });

      $("#where").keyup(function() {
        if ($("#where").val().length > 2) {
          $('.location-popup').hide();
          $('hr').hide();
        }
      });

      $('#location').focusout(function() {
        $('.location-popup').hide();
        $('hr').hide();
      });
    });

---

您的用户界面可能弄乱了它。我保留了一个最小的用户界面和它如何工作良好

      <a id="share">&nbsp;Share my Location</a>
      <p id="coords">

      </p>

---

id应该是“共享”而不是“共享”。

      <a id="share">&nbsp;Share my Location</a>
      <p id="coords">

      </p>

  var coords = document.querySelector('#coords');
  $('#share').click(function() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(location) {
        coords.innerHTML = location.coords.latitude+"\n"+location.coords.longitude;
      });
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
  });