如何檢查頁面中的內容是否已更改？

Question

如果我要在頁面中進行任何更改，然后嘗試不保存就導航至其他位置，我想顯示一條錯誤消息，詢問是否要保存更改。

Answer 1

您需要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即可在用戶嘗試離開頁面時刪除消息。

Answer 2

有幾件事要考慮。

您使用哪些元素進行輸入。 這將影響您的elementSelector（在下面的代碼中使用）。如果您使用諸如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將數據發布到服務器上），則需要更新存儲值，以便后續更改正確地再次欺騙消息，但如果用戶未更改，則不會欺騙消息保存后的任何東西