Jquery click trigger gives error 'Maximum call stack size exceeded '

Question

I know I might get bunch of downvotes but I don't care, crap like this drives me insane. Here's what I got:

jq:

function attFile(){
   $("#theFileInput").trigger('click');
};

html:

<a href="#" id="attachfile" onclick="attFile();">
<input type="file" id="theFileInput" style="display:none" />

And it doesn't work. I've check entire stackoverflow, I've used jsfiddles from people that actually work and they fail here. For instance:

$('#attachfile').click(functcion () {
$("#theFileInput").trigger('click'); // or triggerHandler or click()
});

or

function attFile(event){
event.preventDefault();
$("#theFileInput").trigger('click');
};

It all fails. Event will give me "call to undefined", while rest gives me Uncaught RangeError: Maximum call stack size exceeded If I break it with alert("jq please"); at the first line, depending on the code I use, one will loop forever, while others will show the alert but not click the damn file input.

Answer 1

Html:

<a href="javascript:void(0);" id="attachfile">Click on me </a>
<input type="file" id="theFileInput" style="display:none" />

JS:

$('#attachfile').click(function () {
$("#theFileInput").trigger('click');
});

Sample