How to Disable Click Event using jQuery

By: CodexWorld | Last Updated: Oct 19, 2016

Perhaps you were faced with a common problem when you’re using jQuery Ajax to submit a form, the form data is submitted multiple times if the submit button is clicked multiple times. To solve this issue you only need to write one line code in jQuery.
jQuery off() method is used to remove event handler from the element attached with the on() method. Use off() method after click event is triggered to disable element for the further click.

$('#clickElement').off('click');

The following code snippet is a real-time example for disabling click event using jQuery.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('#disable').on('click',function(){
            $('#clickElement').off('click');
        });
        $('#clickElement').on('click',function(){
            alert('Welcome to CodexWorld!');
        });
    });
    </script>
</head>
<body>
    <button id="clickElement">Click Here</button>
    <button id="disable">Disable Click</button>
</body>
</html>