title: how to get element value from focus-blur event in javascript
body: <p>I like to know how to get value from element (using click event) triggered in focus-blur event. I create icon picker which like jQuery datepicker. Here the code, but when I click the icon, date picker element hide without give the value.</p>
  
  <p>PHP code</p>
  
  <pre><code>&lt;input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/&gt;
  &lt;div id="iconPicker" class="iconpicker dropdown-menu"&gt;
      &lt;div class="iconpicker-wrapper"&gt;
          &lt;table class="dt-icons"&gt;
          &lt;?php
          foreach (array_chunk($icons, 5, true) as $icon_cunk) {
              echo '&lt;tr&gt;';
              foreach($icon_cunk as $key =&gt; $ico) {
                  echo '&lt;td data-value="'. $key .'"&gt;&lt;i class="' . $key .'"&gt;&lt;/i&gt;&lt;/td&gt;';
              }
              echo '&lt;/tr&gt;';
          }
          ?&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$("#contentIcon").keypress(function (e) {
      e.preventDefault();
  });
  
  $(document).on('click', '#iconPicker table.dt-icons td', function () {
      $('#contentIcon').empty();
      var _dtself = $(this);
      document.getElementById("contentIcon").value = _dtself.data('value');
  });
  
  $('#contentIcon').focus(function() {
      $('#iconPicker').show();            
  }).blur(function() {
      $('#iconPicker').hide();
  });
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p><code>#iconPicker</code> is a hidden (display: none) element, used to choose icon. It will be shown when user focus on <code>#contentIcon</code> input field and will be hidden back when blur event triggered. If I remove <code>$('#iconPicker').hide();</code> in <code>blur</code> even handler part, then (I format this code, thanks to @Reddy)</p>
  
  <pre><code>$(document).on('click', '#iconPicker table.dt-icons td', function () {
      $("#contentIcon").val($(this).data('value'));
  });
  </code></pre>
  
  <p>can be triggered and the value placed to <code>#contentIcon</code> input field. But, <code>#iconPicker</code> not hidden back. If I used <code>$('#iconPicker').hide();</code> in <code>click</code> event handler, the <code>#iconPicker</code> will not hide if user not choose icon.</p>
  
  <p><strong>update</strong></p>
  
  <p>here the example <a href="https://jsfiddle.net/ekosubha/xw0suv8g/" rel="nofollow">jsfiddle.net</a></p>