2

次のコードを使用してフォームのajaxリクエストを実行しますが、ボタンでライブセレクターを使用すると、ajax応答が1回発生するのを確認できます。その後、2回、3回、4回などを再試行します。 ..

.live投稿を追加する機能もあり、すぐに表示されるので、ユーザーがページを更新せずに投稿を削除できるため、使用しています...

次に、これは上記の問題につながります...使用.clickするとこれを解決できますが、私が探している理想的な解決策ではありません...

jQuery.fn.postAjax = function(success_callback, show_confirm) {
    this.submit(function(e) {
        e.preventDefault();
        if (show_confirm == true) {
            if (confirm('Are you sure you want to delete this item? You can\'t undo this.')) {
                $.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
            }
        } else {
            $.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
        }
        return false;
    })
    return this;
};
$(document).ready(function() {
    $(".delete_button").live('click', function() {
        $(this).parent().postAjax(function(data) {
            if (data.error == true) {

            } else {

            }
        }, true);
    });
});​

編集:一時的な解決策は変更することです

this.submit(function(e) {

this.unbind('submit').bind('submit',function(e) {

問題は、Firebugまたは他のブラウザで同じツールを使用する方法を知っている人が、私のJavascriptコードを簡単に変更して問題を再現できるため、実際にそれを保護する方法です。

4

2 に答える 2

10

ボタンをクリックするたびに新しいクリックイベントをバインドしたくない場合は、イベントを再バインドする前にイベントのバインドを解除する必要があります。そうしないと、複数のバインドが発生します。

バインドされたイベントのバインドを解除するには、live()を使用できますdie()die()withを使用する構文live()はこれに似ていると思います(テストされていません):

$(document).ready(function(){
    $('.delete_button').die('click').live('click', function(){
        $(this).parent().postAjax(function(data){
            if (data.error == true){
            }else{
            }
        }, true);
    });
});

ただし、jQuery 1.7以降を使用している場合は、1.7以降非推奨になっているon()のではなく、多くの欠点があります。 詳細については、ドキュメントを参照してください。live()live()

使用on()するには、次のようにバインドできます(delete_buttonは動的に追加された要素であると想定しています):

$(document).ready(function(){
    $(document).off('click', '.delete_button').on('click', '.delete_button', function(){
        $(this).parent().postAjax(function(data){
            if (data.error == true){
            }else{
            }
        }, true);
    });
});

以前のバージョンのjQueryを使用している場合は、代わりにundelegate()またはを使用できます。構文は上記と同じだと思います。unbind()delegate()on()

編集(2012年8月29日)

問題は、Firebugまたは他のブラウザで同じツールを使用する方法を知っている人が、私のJavascriptコードを簡単に変更して問題を再現できるため、実際にそれを保護する方法です。

スクリプトをある程度保護することはできますが、サイトに対して誰かが独自のカスタムスクリプトを実行するのを防ぐことはできません。

少なくとも自分のスクリプトをある程度保護するには、次のことができます。

  • 外部のjsファイルにスクリプトを記述し、そのスクリプトへの参照をサイトに含めます
  • リリース用にファイルを縮小する

外部のjsファイルにスクリプトを記述し、そのスクリプトへの参照をサイトに含めます

これにより、HTMLがクリーンになり、スクリプトの痕跡が残りません。ユーザーはもちろんスクリプトリファレンスを見て、それに従ってファイルを縮小してリリースすることができます。

スクリプトファイルへの参照を含めるには:

<script type="text/javascript" src="/scripts/myscript.js"></script>
<script type="text/javascript" src="/scripts/myscript.min.js"></script>

リリース用にファイルを縮小する

スクリプトファイルを縮小すると、余分なスペースが削除され、関数名が文字に短縮されます。JQueryの縮小版に似ています。コードは引き続き機能しますが、意味がありません。もちろん、ハードコアユーザーは意味のない名前付きコードをたどり、最終的にはあなたが何をしているのかを理解することができます。ただし、ハッキングする価値がない限り、平均的なサイトで誰もが気にすることはないと思います。

個人的には縮小プロセスを実行していませんが、ここにいくつかのリソースがあります。

編集(2012年9月1日)

one()adeneoの使用に関するのコメントに応えて。送信イベントへのバインドを解除して再バインドすることで、問題の解決策がすでに見つかっていることを知っています。

イベントをone()one()にバインドすると、イベントが実行されてから再びバインドが解除されるため、完全を期すためにこの回答に言及することは価値があると思います。

クリックイベントとして、トリガーされると、バインド解除と再バインドの代わりに、とにかくそれ自体を再ロードしone()て再バインドすることも意味があります。

on()そのための構文は、動的要素を念頭に置いて、に似ています。

// Syntax should be right but not tested.
$(document).ready(function() {
    $(document).one('click', '.delete_button', function() {
        $(this).parent().postAjax(function(data) {
            if (data.error == true) {} else {}
        }, true);
    });
});​

関連リソース


もう一度編集!!!! :

jQuery.fn.postAjax = function(show_confirm, success_callback) {
    this.off('submit').on('submit', function(e) { //this is the problem, binding the submit function multiple times
        e.preventDefault();
        if (show_confirm) {
            if (confirm('Are you sure you want to delete this item? You can\'t undo this.')) {
                $.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
            }
        } else {
            $.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
        }
    });
    return this;
};
$(document).ready(function() {
    $(this).on('click', '.delete_button', function(e) {
        $(e.target.form).postAjax(true, function(data) {
            if (data.error) {

            } else {

            }
        });
    });
});​
于 2012-08-25T21:42:24.337 に答える
0
jQuery.fn.postAjax = function(success_callback, show_confirm) {
    this.bind( 'submit.confirmCallback', //give your function a namespace to avoid removing other callbacks
      function(e) {
        $(this).unbind('submit.confirmCallback');
        e.preventDefault();
        if (show_confirm === true) {
            if (confirm('Are you sure you want to delete this item? You can\'t undo this.')) {
                $.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
            }
        } else {
            $.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
        }
        return false;
    })
    return this;
};
$(document).ready(function() {
    $(".delete_button").live('click', function() {
        $(this).parent().postAjax(function(data) {
            if (data.error == true) {

            } else {

            }
        }, true);
    });
});​

「人々は Firebug を使用して私の JavaScript を変更することができた」という引数については、それは成立しません。人々は、あなた$.post(...)から送信されたリクエストを見て、それを 2 回送信することもできます。

ブラウザで何が起こるかを制御することはできず、「ブラウザに2回表示されないため、データベースが破損するのを防ぐ」ことを期待するのではなく、サーバー側の処理を保護する必要があります.

于 2012-09-03T07:51:22.350 に答える