WordPress站点AJAX按钮绑定confirm框，用户勾选阻止提示后失效如何解决？

问题根因 #

你遇到的按钮失效问题是浏览器原生confirm()的机制导致的：当用户勾选「阻止此站点弹出同类提示」后，后续所有confirm()调用会被浏览器直接拦截，静默返回false，不会弹出任何窗口，所以你原有代码里的if(x == true)判断就直接跳过了AJAX执行逻辑。

可行编码方案 #

推荐两种落地方式，你可以根据自己的需求选择：

方案1：自定义模态框（更稳妥，完全可控，不会触发浏览器拦截） #

放弃原生confirm()，自己实现一个带「不再提示」复选框的自定义弹窗，完全不受浏览器原生弹窗拦截规则影响，逻辑更灵活。

步骤1：添加全局弹窗HTML

你可以把这段代码加到主题的公共页脚模板里：

<!-- 全局自定义操作确认弹窗 -->
<div id="custom-confirm" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px;background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,0.1);z-index:99999;">
  <p id="confirm-content"></p>
  <label style="display:flex;align-items:center;margin:12px 0;gap:6px;">
    <input type="checkbox" id="skip-next-confirm"> 后续同类操作不再提示
  </label>
  <div style="display:flex;justify-content:flex-end;gap:8px;">
    <button id="confirm-cancel" style="padding:4px 12px;">取消</button>
    <button id="confirm-submit" style="padding:4px 12px;background:#2271b1;color:#fff;border:none;border-radius:2px;">确认</button>
  </div>
</div>

步骤2：替换原有JS逻辑

把你原来的确认+AJAX逻辑替换成如下代码：

// 初始化：从本地存储读取用户的免确认设置
const CONFIRM_KEY = 'skip_mark_complete_confirm';
let skipConfirm = localStorage.getItem(CONFIRM_KEY) === '1';

// 你的表格按钮点击事件（替换成你实际的按钮选择器）
$('.table-action-btn').on('click', function() {
  const trid = $(this).data('row-id'); // 替换为你自己获取行ID的逻辑
  const $currentBtn = $(this);

  // 已经开启免确认，直接执行AJAX
  if (skipConfirm) {
    runCompleteAction(trid, $currentBtn);
    return;
  }

  // 弹出自定义确认框
  $('#confirm-content').text('Press Ok to mark complete.');
  $('#custom-confirm').show();

  // 绑定确认按钮事件
  $('#confirm-submit').off('click').on('click', function() {
    $('#custom-confirm').hide();
    // 如果勾选了不再提示，把配置存到本地存储
    if ($('#skip-next-confirm').is(':checked')) {
      skipConfirm = true;
      localStorage.setItem(CONFIRM_KEY, '1');
    }
    // 执行AJAX操作
    runCompleteAction(trid, $currentBtn);
  });

  // 绑定取消按钮事件
  $('#confirm-cancel').off('click').on('click', function() {
    $('#custom-confirm').hide();
  });
});

// 封装AJAX逻辑复用
function runCompleteAction(trid, $btn) {
  $.post(my_ajax_obj.ajax_url, {
    _ajax_nonce: my_ajax_obj.nonce,
    action: "all_table_complete",
    row_result_id: trid
  }, function(data) {
    const retractTdId = "retract_button_" + trid;
    $btn.closest('td').html(data);
    document.getElementById(retractTdId).innerHTML = "Completed";
  });
}

方案2：原生confirm兼容方案（无需改UI，适合不想调整弹窗样式的场景） #

如果不想替换原生弹窗，可通过响应耗时判断弹窗是否被拦截，只要用户之前确认过操作，后续被拦截时默认直接执行逻辑：

const CONFIRM_KEY = 'skip_mark_complete_confirm';
let skipConfirm = localStorage.getItem(CONFIRM_KEY) === '1';
const confirmMsg = 'Press Ok to mark complete.';

// 按钮点击逻辑
if (skipConfirm) {
  // 已经开启免确认直接执行AJAX
  runYourAjaxLogic();
} else {
  const startTime = Date.now();
  const confirmRes = confirm(confirmMsg);
  const useTime = Date.now() - startTime;

  // 两种情况执行逻辑：用户主动点击确定 / 弹窗被浏览器秒拦截（说明用户已经勾选过阻止，之前确认过操作）
  if (confirmRes || useTime < 15) {
    localStorage.setItem(CONFIRM_KEY, '1');
    skipConfirm = true;
    runYourAjaxLogic();
  }
}

// 把你原来的AJAX逻辑封装到这个函数里
function runYourAjaxLogic() {
  $.post(my_ajax_obj.ajax_url, {
    _ajax_nonce: my_ajax_obj.nonce,
    action: "all_table_complete",
    row_result_id: trid
  }, function(data) {
    const retractTdSearchFor = "retract_button_" + trid;
    this2.closest('td').innerHTML = data;
    document.getElementById(retractTdSearchFor).innerHTML = "Completed";
  });
}

补充说明 #

两种方案都支持用户重置免确认状态，你可以在站点后台的个人设置页加个「恢复所有操作确认提示」的按钮，点击后执行localStorage.removeItem('skip_mark_complete_confirm')即可重置状态。

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