title: Javascript Click event on input field
body: <p>Binding a click event on the item list, the box keeps disappearing. Any idea why click event not working on  item-list > div. </p>
  
  <p>The idea is to fetch the text(from item-list) that is being clicked and put it in the input field ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
    $(".input-msg").focus(function() {
      $(".item-list").css('display', 'block');
      $(".item-list div").click(function() {
        var inputValue = $('.input-msg');
        var data = $(this).text();
        inputValue.val(data);
      });
    }).blur(function() {
      $(".item-list").css('display', 'none');
    });
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.input-wrapper {
    width: 300px;
  }
  
  .item-list {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="input-wrapper"&gt;
    &lt;input type="text" class="input-msg" placeholder="click me"&gt;
    &lt;!-- input msg --&gt;
    &lt;div class="item-list"&gt;
      &lt;div&gt;This is item one&lt;/div&gt;
      &lt;div&gt;This is item one&lt;/div&gt;
      &lt;div&gt;This is item one&lt;/div&gt;
      &lt;div&gt;This is item one&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>