ページ内の何かが変更されたことを確認する方法は？

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の回答のように、自動的にインプレース編集をサポートするようにバインドの代わりにライブでこれを行うことをおすすめします。

変更イベントでフラグを設定するフラグの解決方法では、ユーザーが値を元の値に戻す場合は対象となりません。

以下のコードの考え方は、監視して元の値を保存するすべての要素を反復することです。値がアンロードされると、変化が検出された場合に警告が与えられるべきであるかどうかが比較される。ユーザーが保存した後のページに留まる場合

$(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"); 
     } 
    }; 
}); 

（IEを。データは、AJAXを使用してサーバに送信されます）以降の変更が正しく再びメッセージをトリッカーズが、何のメッセージはありませんように、あなたは店の値を更新する必要がありますユーザーが保存した後に何も変更しない場合はトリックします