如何检查页面中的某些内容是否已更改

onbeforeunload事件就是你需要的。将一个函数绑定到它，每当用户尝试从页面导航离开（按后退、前进、单击链接、关闭选项卡或窗口本身）时，该函数都会返回要显示的string（仅适用于 Chrome，其他浏览器将显示默认消息）。

向用户显示类似确认对话框，如果用户选择继续，则会执行他请求的操作。如果他选择留在页面上，什么都不会发生。

$('input').change(function(){
    window.onbeforeunload = function(){
         //Return the message that should be displayed in Chrome.
         // Other browsers will show default message.
         return "You have unsaved changes on this page";
     };
});

保存更改后，只需设置window.onbeforeunload = null，以便在用户尝试离开页面时删除消息。

有几件事需要考虑。

您使用哪些元素进行输入。这将影响您的元素选择器（在下面的代码中使用）如果你使用像jeditable这样的插件，你必须知道的不仅仅是你用于输入的元素。您还需要知道用于显示值的元素。

如果您绑定到更改，如 Sudhirs 回答，我建议使用 live 执行此操作，而不是以自动支持就地编辑的方式绑定。

在更改事件上设置标志的标志解决方案不包括用户将值更改回原始值的情况。

下面代码的思想是迭代要监视的所有元素并存储原始值。对于卸载，然后比较值，如果发现更改，则应发出警告。

$(function(){
   function getVal(){
      var val,node = $(this),nodeType = node.attr('type');
       if(this.nodeName.toLowerCase() == input){
           if(nodeType === "checkbox" || nodeType === "radio"){
               val = node.attr('checked');
           } else{
               val = node.val();
           }
       } else{
          val = node.text();
       }
       return val;
   }
   $(elementSelector).each(function)({
       $(this).data('original',getVal.Call(this));
   });
   window.onbeforeunload = function(){
      var hasChanges;
      $(elementSelector).each(function(){
            var org = $(this).data('original'),val = getVal.call(this);
            hasChanges = hasChanges || (org !== val)
      });
      if(hasChanges){
          return "Are you sure you wish to leave this page. Changes will be lost");
      }
   };
});

如果用户在保存后留在页面上（即数据使用 ajax 发布到服务器），则需要更新存储值，以便后续更改再次正确欺骗消息，但如果用户在保存后未更改任何内容，则不会欺骗任何消息