ボタンをクリックするたびに新しいクリックイベントをバインドしたくない場合は、イベントを再バインドする前にイベントのバインドを解除する必要があります。そうしないと、複数のバインドが発生します。
バインドされたイベントのバインドを解除するには、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 {
}
});
});
});