JQuery當我點擊時我得到一個錯誤未捕獲RangeError：超過最大調用堆棧大小

Question

我寫了JQuery點擊另一個元素，當我點擊一個元素，但我得到一個錯誤：未捕獲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對內部元件的點擊：

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

Answer 2

當dropdownmenu的點擊觸發，它不斷遞歸發生。

只有當點擊發生在其他地方時，您才需要觸發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>