Bootstrap确认框中preventDefault失效，页面刷新问题排查与解决

让我帮你拆解下问题根源，以及对应的修复步骤：

核心原因：事件参数未传递，导致e.preventDefault()失效 #

你写的confirmed.bs.confirmation事件处理函数里，没有接收事件对象e，直接调用e.preventDefault()会触发「e未定义」的报错，浏览器会中断后续代码执行，最终触发了按钮的默认行为（比如表单提交或页面跳转），导致页面刷新。

具体修复步骤 #

1. 补上事件参数，让preventDefault()生效

把事件处理函数的参数补上e，这样e才能正确指向事件对象：

$(function() { 
  $('#enableBtn{!! $zone->id !!}').on('confirmed.bs.confirmation', '', function (e) { 
    e.preventDefault(); // 现在能正常阻止默认行为了
    // 后续Ajax代码...
  }); 
});

2. 修正Ajax请求的参数错误

你的代码里存在变量不匹配的问题：定义了ZoneId、value，但Ajax的data却用了未定义的title和body；另外Laravel的POST请求必须携带CSRF Token，否则会被框架拦截：

// 直接用后端传入的zone id，不要写死为1
var ZoneId = {!! $zone->id !!}; 
var value = 1;
var published_at = $('#published_at').val();

$.ajax({
  type: "POST",
  url: host + '/zone/toggleEnable',
  data: {
    id: ZoneId, 
    value: value,
    published_at: published_at,
    _token: '{{ csrf_token() }}' // 必须添加CSRF Token
  },
  success: function( msg ) {
    alert('success');
    // 这里可以更新页面UI，比如切换按钮状态、提示用户操作结果
  },
  error: function(xhr) {
    alert('请求失败：' + xhr.responseText); // 增加错误处理，方便调试
  }
});

3. 额外保障：避免按钮默认提交行为

如果这个按钮是表单内的元素，建议给按钮加上type="button"，从根源上避免默认提交：

<button id="enableBtn{!! $zone->id !!}" type="button">切换状态</button>

调试小技巧 #

如果还是遇到问题，按下F12打开浏览器控制台，查看「控制台」标签页的报错信息——比如CSRF Token缺失、变量未定义这类问题，都会在这里给出明确提示，帮你快速定位问题。

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