JQueryクリックするとエラーが発生するUncaught RangeError：最大呼び出しスタックサイズを超えた

Question

1つの要素をクリックしたときに別の要素をクリックするように書いたが、エラーが発生する：Uncaught RangeError：最大呼び出しスタックサイズを超えた。 どうすればいいですか？ ここに私のコード：

<div class="outer-details"> 
<div class="details" > 
    <button class="btn" type="button" id="dropdownMenu1" >  
</button> 

</div> 

そして、これが私のjQueryのです：

<script> 
$('.outer-details').on({ 
    click: function (e) { 
     var $this = $(this); 
     e.stopPropagation(); 
     $this.find('#dropdownMenu1').trigger("click"); 

    } 
}); 

が、私は、コンソールエラーで取得：例外RangeError：最大コールスタックサイズを超えました。 どうすればよいですか？ おかげ

Answer 1

あなたは内部要素のクリックでstop the immediate propagationする必要があります。dropdownmenuのクリックがトリガされると

$('#dropdownMenu1').click(function(e){ 
    e.stopImmediatePropagation(); 
    //rest of your code 
}); 

Answer 2

、それは再帰的に起こって保持します。

dropdownmenuクリックは、クリックが他の場所で発生した場合にのみトリガーする必要があります。

$('.outer-details').on({ 
 
    click: function(e) { 
 
    var $this = $(this), 
 
     $target = $(e.target); 
 
    snippet.log('clicked: ' + e.target) 
 
    if ($target.is('.dropdownMenu1')) { 
 
     //do something when button is clicked 
 
     snippet.log('inside button'); 
 
    } else { 
 
     $this.find('.dropdownMenu1').trigger("click"); 
 
     snippet.log('outside button'); 
 
    } 
 
    } 
 
});

.outer-details .details { 
 
    min-height: 50px; 
 
    background-color: grey; 
 
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer-details"> 
 
    <div class="details"> 
 
    <button class="btn dropdownMenu1" type="button">menu</button> 
 
    </div> 
 
</div>