点击订单卡片触发内部按钮报Maximum call stack size exceeded错误如何解决

你遇到的报错是无限递归触发点击事件导致的栈溢出：

• 你给卡片.order-list-detail-container绑定了点击事件，回调里会触发内部.order-detail-trigger按钮的点击
• 按钮是卡片的子元素，按钮的点击事件默认会向上冒泡到父级卡片，再次触发卡片的点击回调，形成死循环，最终调用栈溢出。

有两种常用的修复方式，选其中一种即可：

方案1：使用triggerHandler触发按钮事件（推荐） #

jQuery的triggerHandler()方法只会执行目标元素上绑定的事件处理函数，不会触发事件冒泡，也不会触发元素的原生默认行为，完美适配你的场景，改完代码如下：

$(document).ready(function(){
  $(".order-list-detail-container").on("click", function() {
    console.log('clicked')
    // 替换原来的.click()为triggerHandler('click')
    $(this).find('.order-detail-trigger').triggerHandler('click')
  })
})

注：你原来写的each遍历绑定是冗余的，jQuery选择器选中的元素会批量绑定事件，不需要单独遍历。

方案2：阻止按钮的点击事件冒泡 #

给内部触发按钮单独绑定点击事件，阻止它向上冒泡，也能打断循环：

$(document).ready(function(){
  // 先给按钮加阻止冒泡的逻辑
  $(".order-detail-trigger").on("click", function(e) {
    e.stopPropagation()
  })
  // 原来的卡片点击逻辑保留即可
  $(".order-list-detail-container").on("click", function() {
    console.log('clicked')
    $(this).find('.order-detail-trigger').click()
  })
})

两种方案都不会影响HTMX的事件触发逻辑，HTMX绑定的点击回调会正常执行，唤起模态框。

内容的提问来源于stack exchange，提问作者fikfe