Jquery .click() gibt mir "Stapelgröße überschritten"

Question

Was in meinem Code gibt mir diesen Fehler?

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("!"); 
    } 
}) 

Wie kann ich diesen Fehler beheben?
Ich versuche, den Dateidialog zu öffnen, wenn ich auf das Formular klicke.

UPDATE
Ich habe versucht:

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

Answer 1

Um einen Click-Ereignishandler zu vermeiden gebunden mit jQuery gefeuert werden, und nach wie vor Ereignispropagierung halten (nützlich, wenn ein Delegierter Click-Ereignis ist auch gebunden ist), könnte man nativen DOM click() Methode stattdessen nennen:

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

Oder:

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

die die gleichen wie sind:

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

Answer 2

Sie click event angeschlossen haben itself.So zu bilden, wenn any form element, es captured durch Form again.So erhalten event bubbling aufgrund geklickt bekommen, wird es click event nennen wieder auf dem Formular.Und der gleiche Vorgang wird immer wieder

Sie können event propagation

verhindern

$('#addPhotoForm').on('click', function(e){ 
    e.stopPropagation(); 

    // rest of the code goes here 
}) 

EDIT: Sie sollten innerhalb Form Ereignishandler ein anderes Element einhängen, die an den Endverbraucher sichtbar ist und nicht

Answer 3

zu bilden

Es gibt eine Schleife

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

Wenn Sie zu sein scheinen Wenn Sie auf das Formular klicken, löst der Ereignis-Listener ein Klick-Ereignis auf der Eingabe im Formular aus. Und das Klickereignis auf den Eingabeblasen klickt auf das Ereignis bis zum DOM-Baum. Der Klickereignis-Listener im Formular wird erneut ausgelöst.

Sie müssen aus sprudelnden dem Click-Ereignisse zu verhindern, wenn die Eingabe klicken

$('#addPhotoInput').click(function(e){ 
    e.stopPropagation(); 
    // do some action 
}); 

Answer 4

Sie müssen aus sprudeln #addPhotoInput ‚s Click-Ereignis zu stoppen.

$('#addPhotoInput').on('click', function(e){ 
    e.stopPropagation(); 

    // your code 
} 

Wenn Sie auf ein untergeordnetes Element klicken, erhält das übergeordnete Element als auch einen Klick.

e.stopPropagation() verhindert dieses Verhalten.

In Ihrem Fall bedeutete das Klicken auf #addPhotoInput auch das Klicken auf #addPhotoForm, weil sie verschachtelt waren. Daher wurde der Ereignishandler des Formulars aufgerufen, der wiederum den Eingabe-Handler ausgelöst hat und den Prozess rekursiv und unendlich wiederholt.

Aus diesem Grund haben Sie diese spezielle Fehlermeldung erhalten.

Answer 5

Sie können mit Namespace für Click-Ereignisse

$('#addPhotoInput').on('click.input',function(){ 
    // do something 
}); 

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