1

HTML ページにカスタム データを更新するためのフォームがあります。フォームを送信する前に、フォーム内のデータを更新し、同じ html ページの他のリンクをクリックした場合、ユーザーに確認メッセージを表示したいと思います。

これをどのように実装したか：

ユーザーがフィールドを更新したかどうかを保持するブール変数を作成しました。そして、を使用してhtmlページ内clickのすべてのタグのイベントをバインドしています。ユーザーがページ上の任意のアンカー タグをクリックすると、状態変数が true (値が変更された) かどうかを確認します。本当ならリダイレクトを止めて確認したいです。anchorjquery

ここまでやってきました。cancelしかし問題は、ユーザーが確認ボックスをクリックしてもリダイレクトを停止できなかったことです。

ここにコードがあります

$(document).ready(function(){
  GLOBAL_NAMESPACE.value_changed = false;
  $("[id^='id_']").live('change', function (){
      GLOBAL_NAMESPACE.value_changed = true;
  });
});



$('a').bind('click',function (e) {
    e.preventDefault();
    if (GLOBAL_NAMESPACE.customize_option_changed){
        var res = confirm('you have unsaved changes. Do you want to continue?');
        if(res){
            GLOBAL_NAMESPACE.customize_option_changed = false;
            $(this).click();
        }else{
            console.log('stay on same page...');
            // Problem: user redirects to the clicked link even if he reaches here
        }
    }
});

実装のアイデアに問題はありますか? このコードの問題は何ですか? またはこれを行うためのより良い方法はありますか?

4

1 に答える 1

1

このフィドルは機能します。

var GLOBAL_NAMESPACE = {};

$(document).ready(function(){
  GLOBAL_NAMESPACE.value_changed = true;
});

$('a').bind('click',function (e) {
    e.preventDefault();
    if (GLOBAL_NAMESPACE.value_changed){
        var res = confirm('you have unsaved changes. Do you want to continue?');
        if(res){
            window.location.href = $(this).attr('href');
        }else{
            console.log('stay on same page...');
        }
    }
});

私はいくつかのことを変更しました：

  1. $(document).ready()あなたが設定GLOBAL_NAMESPACE.value_changedしていて、あなたbind()が読んでいる機能でGLOBAL_NAMESPACE.customize_option_changed
  2. jQuery のバージョンによっては、live()メソッドが に置き換えられon()ます。GLOBAL_NAMESPACE.value_changed例のために、私は真実になりたいので、このコードを完全に削除しました。
  3. GLOBAL_NAMESPACE.value_changedユーザーがページを離れているため、ページを離れることを確認した場合は、falseに設定する必要はありません:)
  4. そして、私がコメントで言ったように：私$(this).click();はwindow.location.href = $(this).attr('href');
于 2013-03-20T12:18:37.610 に答える