74

マスターファイルにJqueryコードを書きたいので、ユーザーがページを変更し、保存されていない変更がある場合、ユーザーはアラートを受け取る必要があります。これから1つの答えを得ました：リンク

ただし、ほとんどのソリューションでは、すべてのページにコードを記述する必要があります。誰もが自分のモジュールに書き込むことを心配する必要がないように、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() イベントが発生しません。

コードのどこが間違っている可能性がありますか?

編集: .change() を .click に変更すると、起動されます。jquery 1.4.1 を使用しています。change() が機能しないのは、jquery のバージョンが原因ですか?

4

7 に答える 7

129

これは私が使用しているものです。このすべてのコードを別の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;

$の編集が見つかりません：

このエラーは、次の3つのいずれかによってのみ発生する可能性があります。

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

すべての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ファイルに追加します。

お役に立てれば。

于 2012-08-07T10:54:51.677 に答える
2

テキストボックス付きのtextareaを意味する場合は、入力だけでなくtextareasのイベントも登録する必要があります。isChangeにキーアップを使用して、ユーザーがこの領域からぼやけるのを待たないようにすることができます。

$("input[type='text'], textarea").keyup(function () {
    isChange = true;
})
于 2012-08-07T10:53:30.120 に答える
2

changeイベントは、入力されたすべての文字ではなく、ユーザーが入力をぼかすと発生します。

何かが変更されるたびに呼び出される必要がある場合 (フォーカスがまだその入力フィールドにある場合でも)、キーアップと一連のイベントの組み合わせに依存して、マウスのみを使用した貼り付け/切り取りを追跡する必要があります。

PS 変更を検出するためのアプローチが最適ではないことを認識していただければ幸いです。ユーザーがテキストを入力し、フィールドを離れてから変更を元に戻した場合でも、スクリプトは変更されたテキストについて警告します。

于 2012-08-07T10:49:56.103 に答える
1

change単純にイベントをコールバックにバインドしないのはなぜですか?

$(":input").change(function()
{
    $(window).unbind('unload').bind('unload',function()
    {
        alert('unsaved changes on the page');
    });
});

追加のボーナスとして、confirm変更イベントをトリガーした最後の要素を使用して選択できます。

$(":input").change(function()
{
    $(window).unbind('unload').bind('unload',(function(elem)
    {//elem holds reference to changed element
        return function(e)
        {//get the event object:
            e = e || window.event;
            if (confirm('unsaved changes on the page\nDo you wish to save them first?'))
            {
                elem.focus();//select element
                return false;//in jQuery this stops the event from completeing
            }
        }
    }($(this)));//passed elem here, I passed it as a jQ object, so elem.focus() works
    //pass it as <this>, then you'll have to do $(elem).focus(); or write pure JS
});

保存ボタンがある場合は、アンロード イベントのバインドが解除されていることを確認してください。

$('#save').click(function()
{
    $(window).unbind('unload');
    //rest of your code here
});
于 2012-08-07T11:04:19.763 に答える
1

これは実際には @AlphaMale の回答の別のバージョンですが、いくつかの点で改善されています。

# Message displayed to user. Depending on browser and if it is a turbolink,
# regular link or user-driven navigation this may or may not display.
msg = "This page is asking you to confirm that you want to leave - data you have entered may not be saved."

# Default state
unsaved = false

# Mark the page as having unsaved content
$(document).on 'change', 'form[method=post]:not([data-remote]) :input', -> unsaved = true

# A new page was loaded via Turbolinks, reset state
$(document).on 'page:change', -> setTimeout (-> unsaved = false), 10

# The user submitted the form (to save) so no need to ask them.
$(document).on 'submit', 'form[method=post]', ->
  unsaved = false
  return

# Confirm with user if they try to go elsewhere
$(window).bind 'beforeunload', -> return msg if unsaved

# If page about to change via Turbolinks also confirm with user
$(document).on 'page:before-change', (event) ->
  event.preventDefault() if unsaved && !confirm msg

これは、次の点で優れています。

  • IMHOが自動的に改善するのはcoffeescriptです。:)
  • これは完全にイベント バブリングに基づいているため、動的コンテンツは自動的に処理されます (@AlphaMale の更新にもこれがあります)。
  • GET フォームには一般的に紛失を避けたいデータがないため、POST フォームでのみ動作します (つまり、GET フォームは検索ボックスやフィルター基準になる傾向があります)。
  • 保存を実行するために特定のボタンにバインドする必要はありません。フォームが送信されるたびに、送信が保存されていると見なされます。
  • ターボリンクス対応です。それが必要ない場合は、2 つのpage:イベント バインディングを削除してください。
  • JS の残りの部分に含めるだけで、サイト全体が保護されるように設計されています。
于 2015-09-16T19:43:34.540 に答える
0

etc. 関数を使用$('form').changeしてダーティ ビット変数を設定します。（以前の回答のように）すべての変更をキャッチするのには適していませんが、アプリで興味のあるすべてをキャッチします。

于 2016-10-19T08:15:34.000 に答える