JQuery 当我点击我得到一个错误 Uncaught RangeError: Maximum call stack size exceeded答案

【问题标题】：JQuery When I click I get an error Uncaught RangeError: Maximum call stack size exceededJQuery 当我点击我得到一个错误 Uncaught RangeError: Maximum call stack size exceeded
【发布时间】：2016-03-28 11:58:56
【问题描述】：

当我单击一个元素时，我编写了 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：超出最大调用堆栈大小。该怎么办？谢谢

【问题讨论】：

见右侧相关问题！

标签： javascript jquery html console

【解决方案1】：

当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>

【讨论】：

【解决方案2】：

点击内部元素需要stop the immediate propagation：

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

【讨论】：

谢谢您，我尝试了您的解决方案，但还不行