Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❀ đŸ’»
We are community that shares solutions with each other.

If you think you have something to add here.

you are welcome with your fresh ideas - List Articles

jQuery - how to remove event?

0 contributions
11 points

Using jQuery it is possible to remove event in following ways.

Quick solutions

// 1. Dedicated approaches
//    READ:
//      1. jQuery - how to remove event with off method?
//      2. jQuery - how to remove event with unbind method?

// 2. Removing handler with removeAttr method examples

// 2.1. When event has been added in HTML
   $('#my-button').removeAttr('onclick'); // removing event attribute

// 2.2. When event has been added in JavaScript
   $('#my-button').prop('onclick', null); // removing event property

1. Dedicated approaches:

  1. jQuery - how to remove event with off method? - introduced in jQuery 1.7
  2. jQuery - how to remove event with unbind method? - depricated since jQuerry 3.0

2. Removing handler with removeAttr method examples

This approach is useful when event has been added as element attribute (e.g. onclick).

2.1. When event has been added in HTML

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script>

    function onClick() {
        console.log('Event name: click');
    }

  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
  <button id="my-button" onclick="onClick();">
    Click button...
  </button>
  <br /><br />
  <button id="my-cleaner">
    Remove click event...
  </button>
  <script>
    
    $(document).ready(function() {
        var button = $('#my-button');

        $('#my-cleaner').on('click', function() {
          button.removeAttr('onclick'); // removing event attribute
        })
    });
   
  </script>
</body>
</html>

2.2. When event has been added in JavaScript

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script>

    function onClick() {
        console.log('Event name: click');
    }

  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
  <button id="my-button" onclick="onClick();">
    Click button...
  </button>
  <br /><br />
  <button id="my-cleaner">
    Remove click event...
  </button>
  <script>
    
    $(document).ready(function() {
        var button = $('#my-button');

        button.prop('onclick', function() {
          return onClick;
        });

        $('#my-cleaner').on('click', function() {
          button.removeAttr('onclick'); // removing event attribute
        })
    });
   
  </script>
</body>
</html>

3. Removing handler with prop method example

This approach is useful when event has been added as element property (e.g. onclick).

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script>

    function onClick() {
        console.log('Event name: click');
    }

  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
  <button id="my-button">
    Click button...
  </button>
  <br /><br />
  <button id="my-cleaner">
    Remove click event...
  </button>
  <script>
    
    $(document).ready(function() {
        var button = $('#my-button');

        button.prop('onclick', function() {
          return onClick;
        });

        $('#my-cleaner').on('click', function() {
          button.prop('onclick', null); // removing event property
        })
    });
   
  </script>
</body>
</html>

 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more