フォームの未保存の変更に対するアラート

質問

私は、ユーザーがページを変更し、未保存の変更がある場合は、ユーザーがアラートを取得するように、マスターファイルにJqueryコードを書きたい。 私はこれからの1つの答えを得た。 リンク

しかし、ほとんどのソリューションでは、私はすべてのページでコードを記述する必要があります。私は、誰もが自分のモジュールにそれを書くことを心配する必要はありませんように、それが一箇所にのみ書き込むようにしたいと思います。私のコードは以下のようなものです。

<script type="text/javascript">
    var isChange;
    $(document).ready(function () {
        $("input[type='text']").change(function () {
            isChange = true;
        })
    });
    $(window).unload(function () {
        if (isChange) {
            alert('Handler for .unload() called.');
        }
    });

</script>

しかし、テキストボックスに変更を加えるたびに、.change() イベントが発生しません。

コードに何か問題があるのでしょうか？

EDITです。 .change()を.clickに変更したら発動しました。jquery1.4.1を使っていますが、change()が発動しないのはjqueryのバージョンのせいでしょうか？

どのように解決するのですか？

これは私が使用しているものです、別のJSファイルにこのすべてのコードを入れて、あなたのヘッダーファイルでそれをロードするので、あなたは何度も何度もこれをコピーする必要がないでしょう。

var unsaved = false;

$(":input").change(function(){ //triggers change in all input fields including text type
    unsaved = true;
});

function unloadPage(){ 
    if(unsaved){
        return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
    }
}

window.onbeforeunload = unloadPage;

EDIT for $ が見つかりませんでした。

このエラーは、3つのうちの1つだけが原因です。

1. JavaScript ファイルがページに正しく読み込まれていません。
2. jQuery のバージョンが間違っている。これは、誰かがコアファイルを編集したか、プラグインが $ を上書きしたために起こる可能性があります。 変数が上書きされた可能性があります。
3. ページが完全に読み込まれる前に JavaScript が実行され、その結果、jQuery が完全に読み込まれる前に実行されています。

すべてのJSコードがこの中に配置されていることを確認します。

$(document).ready(function () {
  //place above code here
});

保存/送信/投稿ボタン例外のための編集

$('#save').click(function() {
    unsaved = false;
});

動的入力に対応するための編集

// Another way to bind the event
$(window).bind('beforeunload', function() {
    if(unsaved){
        return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
    }
});

// Monitor dynamic inputs
$(document).on('change', ':input', function(){ //triggers change in all input fields including text type
    unsaved = true;
});

上記のコードをalert_unsaved_changes.jsファイル内に追加します。

これが役立つことを願っています。