Laravel Blade中jQuery函数无法通过onclick触发的问题求助

你的代码有两个核心问题导致点击按钮时deleteData无法正常工作：

1. 模板字符串中直接执行了函数，而非绑定函数调用代码：${deleteData(num, num2)}会在拼接字符串时立即执行deleteData，最终按钮的onclick属性值是函数的返回结果（这里是undefined），而非点击时要执行的函数调用命令。
2. deleteData是局部函数，全局作用域无法访问：它定义在$(document).ready()的回调内部，属于局部函数，按钮的onclick是全局作用域下执行的，自然找不到这个函数。

以下是两种可行的修复方案：

方案一：调整字符串拼接逻辑并暴露函数到全局 #

$(document).ready(function () {  
  // 将函数挂载到window对象，让全局作用域能访问
  window.deleteData = function(firstNo, secondNo){
    console.log(firstNo)
    console.log(secondNo)
  }

  const num = 111
  const num2 = 222

  // 模板字符串中拼接函数调用的代码，而非直接执行函数
  btnGroup += `<button type='button' class="mx-3 btn btn-danger" onclick="deleteData(${num}, ${num2})">Delete</button>`

})

说明：

• 把deleteData挂载到window上，让全局作用域可以访问到这个函数。
• 模板字符串中改为deleteData(${num}, ${num2})，这样拼接后onclick的值是deleteData(111, 222)，点击时才会调用函数。

方案二：使用事件委托（推荐，避免全局污染） #

这种方式不需要暴露全局函数，也更适合动态生成元素的场景：

$(document).ready(function () {  
  function deleteData(firstNo, secondNo){
    console.log(firstNo)
    console.log(secondNo)
  }

  const num = 111
  const num2 = 222

  // 拼接按钮时，把参数存在元素的自定义属性里，不需要写onclick
  btnGroup += `<button type='button' class="mx-3 btn btn-danger delete-btn" data-num="${num}" data-num2="${num2}">Delete</button>`

  // 给父元素（或document）绑定事件委托，监听动态生成的按钮点击
  $(document).on('click', '.delete-btn', function() {
    // 从自定义属性中获取参数
    const firstNo = $(this).data('num')
    const secondNo = $(this).data('num2')
    deleteData(firstNo, secondNo)
  })

})

说明：

• 动态生成按钮时，通过data-*自定义属性存储需要传递的参数。
• 使用事件委托，监听父容器（这里用document，实际可以用按钮的直接父元素，更高效）上的点击事件，匹配.delete-btn类的元素。
• 点击时从元素的data属性中取出参数，调用deleteData函数，避免了全局函数的暴露，也更符合现代前端的事件处理规范。

内容的提问来源于stack exchange，提问作者MERN Stack Developer