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

Question

>我创建了这个函数来根据按钮的ID单击按钮。

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

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

我像这样调用函数：

<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

单击

外部div 时正在调用您正在调用的函数。在 javascript 单击函数中，您正在调用另一个单击div 内的按钮。

当按钮在div 内部时，单击将向上传播 DOM，并触发外部div 的 onClick 函数;再次调用相同的函数。这会导致函数以递归方式调用自身，并导致堆栈内存不足。

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

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

Answer 2

假设你的问题是"为什么会这样？

触发

按钮上的单击会冒泡到您的div 并触发您的 onclick 处理程序，该处理程序再次触发按钮上的单击事件，该事件再次冒泡(在无限循环中(。

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