在点击事件上触发点击事件，触摸屏

Question

HTML:

     <footer>
        <a href="#"><div class="footbut" id="chooseFile"  onclick="">
                  <div class="done2 gradGreen" data-bind="visible: picsCount(objectInRoute())>0">
                    <div class="typcn typcn-tick indone"></div>
                  </div>
            <div class="typcn typcn-camera bigblack"></div>
            <span data-bind='text: pickONE("aside",18)'></span>
        </div></a>     
    </footer>    
    <form class="uppform" action="upload.php" method="post" enctype="multipart/form-data">
      <input type="file" id="file" name="image" data-bind="value: upload"/>
      <input type="hidden" name="imageObject" data-bind="value: objectInRoute()"/>
      <div data-bind="if: upload()">
        <div class="first stripe40 gradGold tGold">
          <h1  data-bind="text: pickONE('aside',41)"></h1>
        </div>          
        <input type="submit" data-bind="value: upload" id="submit" class="gradGreen"/>
      </div>  
    </form> 

JS:

$('#chooseFile').click(function(){
    alert ("here");
    $('#file').click();
});

(CSS:

#file {
  display: none;
}​

On PC alert works, clicking at #file (=opening choose file) works.

On my touchscreen (android, mobile phone): alert works, but it does NOT open the popup with camera/documents/gallery....

How can I do it to use on touchscreen or is error somewhere else? Thank you!

Answer 1

If anyone would be interested in this particular situation, it seems that this code solves the problem:

#file {
  width: 0;
  height: 0;
  float: left;
  visibility: hidden;
}​

Instead of display: none;

I am not really sure, that it will work on all devices, but on my testing one it does.