Jquery .click() gives me "stack size exceeded"

Question

What in my code gives me this error?

jquery-2.1.3.min.js:3 Uncaught RangeError: Maximum call stack size exceeded

HTML

<form id="addPhotoForm">
    <img class="pull-right" src="" width="100px" height="140px"/>
    <input type="file" id="addPhotoInput" name="addPhotoInput" style="display: none;"/> 
</form>

JS

//On click Photo
$('#addPhotoForm').on('click', function(){
    //Check if usrname exist
    var usrname = $('#usrname').val();
    if(usrname){
        $('#addPhotoInput').trigger('click');
    }
    else{
        alert("!");
    }
})

How can i solve this error?
I'm trying to open the file dialog when clicking on the form.

UPDATE
I tried:

$('#addPhotoInput').click();

Answer 1

To avoid any click event handler bound using jQuery to get fired, and still keep event propagation (useful if any delegate click event is bound too), you could call native DOM click() method instead:

$('#addPhotoInput')[0].click();

Or:

$('#addPhotoInput').get(0).click();

Which are the same as:

document.getElementById('addPhotoInput').click();