クリックボタンとき、親divの中にユーザーがクリック

Question

私はこれをしたい私のウェブでのいくつかの要素のために、このコードを持っている：ユーザーがクリックするdiv要素で、この中にdivの内側のボタンをクリックする（トリガー

これらのボタンはモーダルを開きます）、これはページの他の場所で動作し、ウィンドウを作成します。代わりにトリガーです。このコードで何が悪いですか？私は

:(それを知らない申し訳ありませんが私の英語、感謝

jQuery(".hover-content").click(function(e){ 
     var hl = jQuery(this); 
     jQuery(this).find("button").each(function(){ 
      if(jQuery(this).is(":visible")){ 
       jQuery(this).trigger("click"); 
      } 
     }); 
    }); 

コンソールはこのエラーを示しています。

Uncaught RangeError: Maximum call stack size exceeded

リトル例： https://jsfiddle.net/z0704nss/

Answer 1

それはJavascriptであるためevent bubblingのです
私はを追加することでそれを複製して解決することができますをあなたのコードに追加します。

$(".hover-content").click(function(e){ 
 
    e.preventDefault(); 
 
    console.log('hi') 
 
    e.stopPropagation(); 
 
    $(this).find("button").each(function(){ 
 
     if($(this).is(":visible")){ 
 
      $(this).trigger("click"); 
 
     } 
 
    }); 
 
}); 
 

 
$('.button-ex').click(function(e){ 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    console.log('clicked button') 
 
})

body { 
 
    background-color: #eef; 
 
    padding: 5px; 
 
} 
 
.hover-content{ 
 
    background-color:#FF0000 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="hover-content"> 
 
    <button id="btnOne" class="button-ex">demo1</button> 
 
    <button id="btnTwo" class="button-ex">demo2</button> 
 
</div>