如何檢查頁面中是否發生了變化？

如果我在頁面中進行了任何更改，然後嘗試在未保存的情況下導航，我需要一條錯誤消息來詢問我們是否要保存更改。如何檢查頁面中是否發生了變化？

2012-04-24 Nitish

這可能有所幫助。檢查此：http://stackoverflow.com/questions/1235024/asp-net-jquery-dirty-forms-and-window-onbeforeunload – TRR 2012-04-24 06:18:44

@ rutwick - 它可能比沒有更好，而不是在每一個點擊監聽器表單控件，在這種情況下最好有一個* beforeunload * listener並測試表單控件的當前*值*和它們的* defaultValue *，並在表單提交時移除偵聽器，以便在不需要時不會調用它。 – RobG 2012-04-24 06:38:59

onbeforeunload事件是你需要的。綁定一個函數返回一個string，當用戶嘗試離開（按下，向前，點擊鏈接，關閉標籤或窗口本身）時，將顯示一個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刪除消息時用戶嘗試導航離開該頁面。

來源

2012-04-24 06:30:11

有幾件事情要考慮。

您使用什麼元素進行輸入。這將影響你的elementSelector（在下面的代碼中使用）如果你使用可插入的插件，你必須知道比用於輸入的元素更多的東西。您還需要知道用於顯示值的元素。

如果您綁定改變，如sudhirs回答

，我建議用活，而不是綁定這樣你自動地支持就地編輯這樣做。

，你就改變事件設置一個標誌，並不包括用戶改回原來的情況下該標誌的解決方案。

下面的代碼的想法是遍歷所有要監視和存儲原始值的元素。然後比較卸載值，如果發現有變化，則應給出警告。

$(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服務器），您將需要更新的存儲值，以使後續的變化正確地再次trickers的消息後，卻沒有短信如果用戶在保存後沒有改變任何東西，則打三分。

來源

2012-04-24 06:38:40

如何檢查頁面中是否發生了變化？

回答

相關問題