これが原因で最大コールスタックエラーが発生するのはなぜですか？

Question

私は、このコードブロックによってトリガーされる最大コールスタックエラーがあります。

$(".resume_box").click(function() { 
    $("#resume_upload").trigger("click"); 
}); 

これは、それが参照するHTMLです：

<div class="resume_box"> 
    <div class="file_instructions"> Please use .pdf format</div> 
    <div class="button_plate">Choose a file</div> 
    <input id = "resume_upload" type = "file" name = "resume" style = "display: none" /> 
</div> 

私がチェックしましたし、他に何もJSファイルにありませんまたは同じ名前、クラス、またはIDを持つHTMLファイル。スタックは次のようになります。

trigger @ jquery.min.js:4 
(anonymous) @ jquery.min.js:4 
each @ jquery.min.js:2 
each @ jquery.min.js:2 
trigger @ jquery.min.js:4 
(anonymous) @ script.js:70 
dispatch @ jquery.min.js:3 
r.handle @ jquery.min.js:3 
trigger @ jquery.min.js:4 
(anonymous) @ jquery.min.js:4 
each @ jquery.min.js:2 
each @ jquery.min.js:2 
trigger @ jquery.min.js:4 
(anonymous) @ script.js:70 

スタックサイズを超えるまで、最後の8行を繰り返します。

Answer 1

他のすべての答えはここに、ちょうど別の解決策正しい（event bubbling）されている。単にresume_uploadを削除しますボタンをresume_box要素から削除します。したがって、ボタンのクリックをトリガーすることは、ボックスにバブルアップして、このコールスタックを終了させません。

<div class="resume_box"> 
    <div class="file_instructions"> Please use .pdf format</div> 
    <div class="button_plate">Choose a file</div> 
</div> 
<input id="resume_upload" type="file" name="resume" style="display: none" /> 

ここには、作業codepenがあります。

Answer 2

イベントが伝播するため、イベントがDOMツリーをバブルアップするためです。

#resume_uploadは、.resume_boxの範囲内にあります。要素をクリックすると、親にバブルするイベントが送信されます。

あなたのケースでは、親をクリックすると、親のハンドラに伝播する子のクリックがトリガされます。親ハンドラを呼び出すと、子のクリックが再びトリガされます。内部要素をクリックしたときに

は手動で伝播を防止することによって、この問題を解決することができます：あなたが親のクリックハンドラ内の子要素上でのクリックをトリガーしているので

$("#resume_upload").click(function (e) { 
    e.stopPropagation(); 
}); 

Answer 3

問題があります。このイベントはDOMを親に戻し、親に伝播する子のクリックをトリガーします。親が伝播する子をトリガーします。したがって、無限の再帰とスタックエラー。この問題を解決するには

あなたの代わりに、プログラムでイベントを作成するのと同時に、両方の要素にクリックハンドラをアタッチする方が良いでしょう：

$(".resume_box, #resume_upload").click(function(e) { 
    e.stopPropagation(); // important, as it will prevent the event bubbling .: recursion 
    // your logic here... 
}); 

Answer 4

あなたがイベントに.resume_boxにクリックイベントをトリガしています.resume_boxのハンドラ（クリックイベントがDOMをバブルアップするため）。それはすでに入力をクリックしなかった場合は代わりに、入力のみに手動でクリックをトリガー：

$(".resume_box").click(function (e) { 
    if (e.target.id !== 'resume_upload') 
     $("#resume_upload").trigger("click"); 
}); 

Answer 5

イベントがdomツリーにバブルアップするためです。そのため、clickイベントの親にバインドされている場合は、同じclickが子要素でトリガーされた場合に実行されます。

したがって、ループが作成され、エラーが発生します。

解決策は、event.stopPropagation();を子要素に使用することです。

またはとしてあなたのセレクタを変更します。

$(".resume_box > .button_plate").click(function() {