移动设备上不会触发href标记

Question

以下代码围绕div类“profile-img img-circle update”的href标签不会打开iPhone上的文件对话框。按钮类呢？

<div class="profile_img_container"> 
    <a href="#" class="choose_image needsclick">
        <div class="profile-img img-circle update" style="background-image: url('<?php if($user['profileImage'] == '') { ?>img/male-icon.png<?php } else { ?>uploads/<?php echo $user['profileImage']; ?><?php } ?>');">
            <img src="" class="uploaded">
        </div>
    </a>
    <button class="btn btn-default choose_image needsclick">
        Choose image
    </button>
    <input type="file" accept="image/*" id="image_file" class="btn btn-default btn-ghost-white" name="image_file" />
</div>

请参阅下面的相关Javascript。这用于打开对话框。它可以在台式机和笔记本电脑上运行，而不是在iPhone上运行：

$('.choose_image').click(function(e) {
    e.preventDefault();
    //$('#image_file').trigger('click');
    $('#image_file').click();
});


$('#image_file').change(function() {
    readURL(this);
});

function readURL(input) {
    console.log(input);
  if (input.files && input.files[0]) {
      console.log(input.files);
    var reader = new FileReader();
    reader.onload = function(e) {
        $('.uploaded').attr('src', e.target.result);
        setTimeout(function() {
            if($('.uploaded').width() < $('.uploaded').height()) {
                $('.uploaded').width('100%').height('auto');
            } else {
                $('.uploaded').height('100%').width('auto');
            }

            var cont_width = $('.profile-img.update').width();
            var img_width = $('.uploaded').width();
            var left = (img_width - cont_width) / 2;
            $('.uploaded').css('left', '-'+left+'px');

            var cont_height = $('.profile-img.update').outerHeight();
            var img_height = $('.uploaded').height();
            var top = (img_height - cont_height) / 2;
            $('.uploaded').css('top', '-'+top+'px');
        }, 200);
    }

    reader.readAsDataURL(input.files[0]);
  }
}