jQuery 「イベント」イベントハンドラを解除する

イベントとイベントハンドラの割り当てを解除します。引数を指定しなければ、全イベントに対するすべてのイベントハンドラを解除します。イベントタイプだけ指定した場合は、そのイベントに対するすべてのイベントハンドラを解除します。

書式

$(対象要素).off(イベントタイプ, [セレクタ],[イベントハンドラ名])
$(対象要素).off(イベントタイプ, [セレクタ])
$(対象要素).off(イベントタイプ)
$(対象要素).off()

$('table').off('click dblclick','th',doClick);
$('table').off('click','th');
$('button').off('click');
$('button').off();

サンプル

clickイベントハンドラを割り当て解除する。

 <body>
    <div class="main">
    <div class="header">
    <h1> サンプル </h1>
    </div>
    <div class="content">
      <table>
        <tr>
          <th>ID</th>
          <th>商品名</th>
          <th>単価</th>
          <th>数量</th>
        </tr>
        <tr>
          <td>1</td>
          <td>納豆</td>
          <td>1000</td>
          <td>20</td>
        </tr>
        <tr>
          <td>2</td>
          <td>スパゲッティ</td>
          <td>1000</td>
          <td>10</td>
        </tr>
        <tr>
          <td>3</td>
          <td>牛丼</td>
          <td>1200</td>
          <td>1</td>
        </tr>
        <tr>
          <td>4</td>
          <td>トウモロコシ</td>
          <td>200</td>
          <td>5</td>
        </tr>
      </table>
      <button class="button" type="button">clickだけイベントハンドラを解除</button>
    </div>
    <div class="footer">
      <hr>
      <p class="copyright">2024 xxxx all rights reserved.</p>
    </div>
    </div>
    <script>
    $(document).ready(function(){
      function doclick(){
        alert($(this).text());
      }
      $('table').on('click dblclick','td',{msg:'をクリックしました'},doclick);
      $('.button').on('click',function(e){
        $('table').off('click','td', doclick);
      });
    });
    </script>
    </body>

「clickだけイベントハンドラを解除」ボタンを押した場合、イベントが発火しなくなる。

カテゴリー:JavaScriptjQueryイベント