.clickコールバック内でクリックイベントをトリガーすると、「最大コールスタックサイズを超えました」というメッセージが表示される

Question

なぜこのようなことが起こる可能性がありますか？ ブートストラップポップアップを開くボタンがあります。しかし、モーダルを開く前に私はいくつかの変数を変更する必要があるので、私はブートストラップモーダルを開く隠しボタンでクリックイベントをトリガーしています。 HTMLが

<div id="visible-button"> 
    <span class="hidden" id="open-modal" data-toggle="modal" data-target="#popup-modal"></span> 
</div> 

とJSコードが

$('#visible-button').click(function(){ 
    //perform data manipulation 
    $('#open-modal').trigger('click'); 
}); 

like-ものです。しかし、私は

$('#visible-button').click(function(){ 
    //perform data manipulation 
    setTimeout(function(){ 
    $('#open-modal').trigger('click'); 
    }, 500); 
}); 

にコードを編集する場合、これは

Uncaught RangeError: Maximum call stack size exceeded

を生成like-ものになります

モーダルいつまでも開いて消えていく。 ここでは正確に何が起こっていますか？私は過去にクリックイベントを引き起こしましたが、このようなシナリオには直面しませんでした。 アドバンスのおかげでありがとうございました。

Answer 1

がvisible-buttonにラップされている場合、open-modalをクリックすると、visible-buttonがクリックされます。したがって、表示ボタンをクリックすると、visible-buttonのonclickイベントが発生し、そこでvisible-buttonを再びクリックし、無限ループに入ります。

Answer 2

私の推測では、クリックイベントは終了なしで再帰的に呼び出されます。 open-modal<span>のクリックイベントに対するコールバック機能はありますか？もしそうなら、それを分けてください。

Answer 3

子要素から親要素へのイベント伝播によるものです。 <span>（子要素）をクリックすると、親にイベントを伝播します<div>。

親が子をクリックしたときにイベントをバインドしました。あなたはこのエラーを防ぐことができます

$('#visible-button').click(function(e){ 
    //perform data manipulation 
    $('#open-modal').trigger('click'); 
    return false; 
}); 

$('[data-target="#popup-modal"]').click(function(e){ 
    $("#popup-modal").modal(); 
    return false; 
}); 

Answer 4

クリックイベント関数の最後にe.preventDefault();またはreturn false;でプロパゲーションを停止する必要がありますのでので、クリックイベントのpropofgationで無限ループになります。エラーの原因は、同じ親を再帰的にクリックしていることです。ボタンとモーダルを別々にすると問題が解決します。

<div id="visible-button"></div> 

<span class="hidden" id="open-modal" data-toggle="modal" data-target="#popup-modal"></span>