Issue on Delegateing a File Input to A Div Click : Can you please take a look at this snippet and let me know why I am not able to delegate the FileUpload to a div `img-box`?. I just want to hide the original input and load image by clicking on plus sign instead

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $('.img-box').click(function(e) {
      console.log("Test");
        e.stopPropagation();
        $(this).find('input[type="image"]').click();
    });


<!-- language: lang-css -->

    .img-box{
      min-height:100px;
      min-width:100px;
      background-image: url("https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/07_plus-128.png");
      margin: 0 auto;
      background-size: 40px 40px;
      background-repeat: no-repeat;
      background-position: center; 
    }

    input {
      display:none !important;
    }

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="container">
    <div class="row">
      <div class="col-xs-6 col-md-3 text-center">
        <a href="#" class="thumbnail ">
          <div class="img-box">
      <input type="file" class="file" name="image" />
    <img id="i" class="img-responsive" />
           
          </div>  
        </a>
      </div>
    </div>
    </div>


<!-- end snippet -->

