jQueryのoff()メソッドでイベントを削除する方法

jQueryのoff()メソッドでイベントを削除する方法

jQueryでon()メソッドがあるようにoff()メソッドがあります。

以下はテキストに入力したら文字列長が表示される例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="http://code.jquery.com/jquery.js"></script>
<!– コーディング部分 –>
<script type="text/javascript">
$(function(){
$("#text1").bind("keyup change", function() {
$("#count1").text($(this).val().length);
});
$("#text2").bind("keyup change", function() {
$("#count2").text($(this).val().length);
});
});
</script>
<!– コーディング部分 –>
</head>
<body>
<input type="text" id="text1" />
<p id="count1"></p>
<input type="text" id="text2" />
<p id="count2"></p>
</body>
</html>

view raw
gistfile1.txt
hosted with ❤ by GitHub

デモです。

で、ボタンを作成してクリックすると、文字列長を表示するイベントを削除してみるボタンを作成してみます。この時にoff()メソッドを使用します。

$("#button1").on("click", function() {
$("#text1").off("keyup change"); // ボタンがクリックされたときにoffメソッドを実行する
});

view raw
gistfile1.txt
hosted with ❤ by GitHub

これで、id=test1のテキストボックスのkeyupとchangeイベントを削除します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="https://code.jquery.com/jquery.js"></script>
<!– コーディング部分 –>
<script type="text/javascript">
$(function(){
$("#text1").on("keyup change", function() {
$("#count1").text($(this).val().length);
});
$("#text2").on("keyup change", function() {
$("#count2").text($(this).val().length);
});
$("#button1").on("click", function() {
$("#text1").off("keyup change"); // ボタンがクリックされたときにoffメソッドを実行する
});
});
</script>
<!– コーディング部分 –>
</head>
<body>
<input type="text" id="text1" />
<p id="count1"></p>
<input type="text" id="text2" />
<p id="count2"></p>
<button id="button1">イベント削除</button>
</body>
</html>

view raw
gistfile1.txt
hosted with ❤ by GitHub

デモです。

ちなみにonに対してoffメソッドですが、bindメソッドに対してもoffメソッドは効きます。

jQueryでテキストボックスの文字数をカウントする」はbind使用しています。

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA