Question

JQuery 当我单击时出现错误 Uncaught RangeError: Maximum call stack size reached

2016-03-28

1269

javascript jquery html console

我编写了 JQuery，当我单击一个元素时单击另一个元素，但出现错误：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

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

Answer 2

您需要在点击内部元素时停止立即传播：

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