Jquery onchange function does not get called on hidden file control

Question

I want to call onchange function on selection of file or when file is changed, but my onchange function does not gets called because i have set display:none for file control because i am using calling it on image click, I can't understand how to call it on onchange function:

$(document).ready(function() {
  $('#profile-image').on('click', function() {
    $('#photo').click(); // opens up the file dialog for selection of image
  });
});

$("#photo").change(function() {
  alert($(this).val())
});

.hidden_img {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="hidden_img" type="file" name="imagefile" id="photo"/>
<img src="images/btn.jpg" width="148" height="60" alt="btn" id="profile-image">

Answer 1

Please check below solution, it works fine;

$(document).ready(function() {
  $('#profile-image').on('click', function() {
    $('#photo').click(); // opens up the file dialog for selection of image
  });
});

$("#photo").on('change',function() {
  alert($(this).val())
});

#photo{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="hidden_img" type="file" name="imagefile" id="photo" />
<img src="http://placehold.it/148X60" width="148" height="60" alt="btn" id="profile-image">