Question

我创建了此功能，根据其ID点击按钮。

function clickBtn(button_id) {
    console.log(button_id);
    $(button_id).click();
}

我在console.log中添加了，当我检查它时，它将805次相同的ID（来自争论）添加到控制台，然后返回超出最大堆栈大小的错误。

我正在调用这样的函数：

<div class="col-md-6 price-boxes" onclick="clickBtn('#btn_book_20');">
                <?php echo $twenty_hours; ?>

                <div style="position:absolute; bottom:10px; width:100%;">
                <input type="hidden" name="price_20" value="<?php echo $twenty_hours_price; ?>" readonly="readonly" />
                <button type="submit" name="book" id="btn_book_20" value="20">Book Now</button>
                </div>
            </div><!-- /.col -->

如果单击按钮本身，它可以正常工作并且不会超过堆栈大小

Answer 1

假设您的问题是＆＃34;为什么会发生这种情况？＆＃34;

即使在按钮上触发一次点击也会向你的div冒泡并触发你的onclick处理程序，再次触发按钮上的点击事件再次冒泡（在无限循环中）。

如果您打算提交表单，那么我说不要在触发按钮上的点击事件时烦恼。而是在$('#form-id').submit()

表单上触发提交事件

Answer 2

单击外部div时，将调用您正在调用的函数。在javascript点击功能中，您将再次点击div内的按钮。

当按钮位于div内部时，单击将向上传播DOM并触发外部div的onClick功能;再次调用相同的功能。这导致函数递归调用自身并导致堆栈耗尽内存。

为什么不尝试在表单中包装输入字段并使用以下行提交表单：

function clickBtn(button_id) {
   $("#form").submit();
}

单击按钮的JQuery函数会导致最大堆栈大小

2 个答案: