javascript - Javascript は IE では機能しますが、Chrome では機能しません

Question

javascript を介してテキスト、テキストエリア、およびドロップダウンの変更を検出しようとしているため、ウィンドウのアンロード時に、変更が保存されていないことを示すプロンプトがブラウザに表示されます。私のコードは IE では完全に動作しますが、Chrome では非常に不安定です。これが私のコードです。

var ctr = 1;
    var isFirstLoad = true;
    function propertyChangedByCode() {
        ctr = 0;
        propertyChanged()
    }
    function propertyChanged() {
        $('[id$=SaveButton]').removeAttr("disabled");
        $('[id$=SaveButton]').removeAttr("class");
        $('[id$=SaveButton]').addClass("btn btn-primary");
        warnMessage = 'Warning: You have unsaved changes.';

        window.onbeforeunload = function () {
            if (ctr == 0) {
                return warnMessage
            }
            else if (ctr == 1) {
                ctr = 0;
            }
        }
    }
    $("body").click(function (event) {
        console.log(event.target);
        if (event.target.type == "submit" && event.target.value != "Save" && event.target.value != "Cancel" && event.target.value != "Next") {
            ctr = 0;
            propertyChanged();
            console.log("BODY clicked");
        }
    });

    function pageLoad() {

        jQuery("input.datepicker").dp({
            dateFormat: 'M d, yy',
            altFormat: 'yy-mm-dd',
            buttonText: '<i class="icon icon-calendar"></i>',
            showOn: 'both'
        });

        $("button.ui-datepicker-trigger").addClass('btn right');

        console.log("PageOnLoad: " + ctr);

        var warnMessage = 'Warning: You have unsaved changes.';
        $('input[type="text"],select,textarea').each(function (k, v) {


            var elem = $(this);
            // Save current value of element
            elem.data('oldVal', elem.val());

            // Look for changes in the value
            elem.bind("change keyup input paste", function (event) {
                // If value has changed...
                if (elem.data('oldVal') != elem.val()) {
                    propertyChanged();
                }
            });
        });

        $('.btn').click(function (e) {
            console.log("whatever");
            ctr = 1;
        });

        //ui-datepicker-trigger
        $('.ui-datepicker-trigger').click(function (e) {
            console.log("date");
            ctr = 0;
        });

        if (isFirstLoad) {
            window.onbeforeunload = null;
            $('[id$=SaveButton]').attr("disabled", "disabled")
            ctr = 1;

            console.log("Disable");
            isFirstLoad = false;
        }
    }

私はカウンター(ctr)を使い、状況に応じて1と0に変えています。ただし、最終的に ctr = 0 は通知をトリガーし、1 は反対です。ページを読み込んで、ページから移動すると、何も変更していなくてもブラウザーにプロンプ​​トが表示されます。繰り返しますが、このコードは IE で完全に機能します。現在の手順を変更すると、多くのページを更新する必要があるため、これ以外のソリューションを使用できません。Chrome が js を実行しない理由はありますか? ありがとう！

編集：

コードを調査したところ、この行が問題を引き起こしているようです

elem.bind("change keyup input paste", function (event) {
                ctr = 0;
                // If value has changed...
                if (elem.data('oldVal') != elem.val()) {
                    propertyChanged();
                }
            });

if ステートメントは、Chrome では初回読み込み時に true を返しますが、IE では false を返します。最初のロードでは変更が行われないため、最初のロードでは false になるはずです。