jQuery.AreYouSure v1.9.0插件仅单选按钮生效，其余控件无响应求助

我之前也碰到过类似的控件检测不全的情况，这个问题大概率是Are-You-Sure插件的默认配置没覆盖到你的文本框、复选框这类控件，或者插件没正确监听它们的变化事件。下面给你几个可行的解决方案：

1. 自定义fieldSelector覆盖默认规则 #

Are-You-Sure默认的字段选择器可能只包含了单选按钮这类控件，你可以手动指定需要检测的所有控件类型，确保文本框、复选框都被纳入检测范围：

function SetMultiSlidesSelectedView() {
  $("#MultiSelectedSlidesSettings").areYouSure({
    message: 'It looks like you have been editing something. ' + 
             'If you leave before saving, your changes will be lost.',
    // 自定义选择器：排除按钮、隐藏域，包含所有其他输入控件
    fieldSelector: ":input:not(input[type=button],input[type=submit],input[type=reset],input[type=hidden])"
  });
}

你可以根据实际表单里的控件类型，再调整这个选择器的规则。

2. 确保控件初始值被正确捕获 #

插件是通过对比控件的初始值和当前值来判断是否有修改的，如果初始化插件时，控件的初始状态没被正确记录，就不会触发提示：

• 文本框要确保value属性在插件初始化前就已设置（你的示例里文本框有value="abc"没问题，但如果是动态赋值的，要等赋值完成后再初始化插件）
• 复选框要明确设置checked属性（如果默认选中的话），或者确保初始化插件时已处于正确的初始状态

3. 手动触发变化检测 #

如果某些控件的事件没被插件默认监听（比如文本框的input事件），可以手动添加事件监听，触发插件的检测逻辑：

function SetMultiSlidesSelectedView() {
  const form = $("#MultiSelectedSlidesSettings");
  form.areYouSure({
    message: 'It looks like you have been editing something. ' + 
             'If you leave before saving, your changes will be lost.'
  });

  // 给文本框添加input事件，触发插件检查
  form.find("input[type=text]").on("input", function() {
    form.areYouSure("checkForm");
  });

  // 给复选框添加change事件
  form.find("input[type=checkbox]").on("change", function() {
    form.areYouSure("checkForm");
  });
}

替代方案：手动实现修改检测 #

如果插件的配置调整还是不生效，你可以自己实现类似功能，灵活度更高：

let formChanged = false;
const form = $("#MultiSelectedSlidesSettings");

// 提前记录所有控件的初始值
const initialValues = {
  temp: form.find("#temp").val(),
  // 假设你有一个id为checkbox1的复选框
  checkbox1: form.find("#checkbox1").is(":checked"),
  // 其他控件的初始值也在这里记录
};

// 监听所有控件的变化事件
form.find(":input:not(button)").on("input change", function() {
  // 对比当前值和初始值，判断表单是否有修改
  formChanged = (
    form.find("#temp").val() !== initialValues.temp ||
    form.find("#checkbox1").is(":checked") !== initialValues.checkbox1
    // 其他控件的对比逻辑依次添加
  );
});

// 监听页面离开前的提示
window.addEventListener("beforeunload", function(e) {
  if (formChanged) {
    const message = 'It looks like you have been editing something. If you leave before saving, your changes will be lost.';
    e.returnValue = message;
    return message;
  }
});

// 提交表单时重置修改状态
$("#btnSubmitSlide").on("click", function() {
  formChanged = false;
  // 执行你的xxxx()逻辑
});

内容的提问来源于stack exchange，提问作者Azaz ul Haq