1

beforeunload イベントをウィンドウにバインドして、含める必要のない入力以外のフォームへの変更を検出する Web フォームがあります。たとえば、beforeunload イベントをバインドする必要のない入力です。ウィンドウから離れたときに失われる変更に影響する入力に対してのみバインドする必要があります。

これは私が持っている現在のバインディングです:

formChanged = false;
$('#main-form').on('change.form_change', 'input:not(.leave-change-allowed), textarea:not(.leave-change-allowed), select:not(.leave-change-allowed)', function()
{
    if(!formChanged)
    {
        formChanged = true;

        $(window).bind('beforeunload', function()
        {
            if(formChanged)
            {
                return 'Are you sure you want to navigate away from this window, you will lose unsaved changes.';
            }
        });
    }
    else
    {
        $(this).unbind('change.form_change');   
    }
});

ご覧のとおり:not(.leave-change-allowed)、フォーム要素を選択するためにコンマで区切ってセレクターの要素に含めました。ただし、に追加しnot()たいセレクターがほとんどない可能性があるため、セレクターに追加したくありませんが、各フォーム入力にnot()適用する必要があります。これらの要素は動的であるため、ではなくを使用したことに注意してください。inputtextareaselect.on().change()

.not()関数を動的要素と連鎖させるにはどうすればよいですか? だから私はセレクターをそのままにして、.not()関数内のすべての不要な要素を渡しますか?

4

1 に答える 1

3

関数内のクラスのターゲットを確認します。

formChanged = false;
$('#main-form').on('change.form_change', 'input, textarea, select', function(e) {
    if(! (formChanged || $(e.target).is('.leave-change-allowed')) ) {
        formChanged = true;
        $(window).on('beforeunload', function() {
            if(formChanged) {
                return 'Are you sure you want to navigate away from this window, you will lose unsaved changes.';
            }
        });
    } else {
        $(this).off('change.form_change');   
    }
});
于 2013-03-20T22:21:14.327 に答える