jQuery: Disable onclick event using off() not working

Question

Here is a simple example of what I'm trying to do, I have code in HTML and my aim is to disable the three hyperlinks #validate,#organize and #export:

<p id="menuitems" class="inline textcenter">
                        <a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >> 
                        <a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >> 
                        <a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >> 
                        <a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
                    </p>

When I'm trying to call the following, nothing happend. I'm using jQuery 1.11.4 and I've read that the methods for disabling event listeners have changed since 1.7. So I would like to know if there is an error in my JavaScript code below or some new changes:

$('#validate').off('click');
$('#organize').off('click');
$('#export').off('click');

off() only works with events that were attached with on(). You're attempting to off() events that are attached inline through plain DOM attributes, and not via jQuery. — Cᴏʀʏ
– Cᴏʀʏ, Commented Nov 9, 2015 at 17:20
i used it as a replacement for the unbind() method that was used earlier. here i'm trying to disable the event without actually removing it. — Peter G.
– Peter G., Commented Nov 9, 2015 at 17:23
Is it like a security feature? Maybe you should keep a flag as to whether those three events are "available", and check it in the body of switchScreen(). return false; in switchScreen() to bail out, and change the onclick attribute to ="return switchScreen('Screen');". — Cᴏʀʏ
– Cᴏʀʏ, Commented Nov 9, 2015 at 17:30
There's no such thing as disabling a listener without removing it. Even if .off() worked, it would remove the listener, and you would have to re-attach it with .on later. — Barmar
– Barmar, Commented Nov 9, 2015 at 17:36

Me.Name · Accepted Answer · 2015-11-09 18:16:36Z

1

One way would be to temporarily set the onclick to null, but store the original element onclick in the element or jquery object (e.g. data). With a helper function you can switch the elements on or off:

function setEnabled($a, Enabled ){
    $a.each(function(i, a){          
        var en = a.onclick !== null;        
        if(en == Enabled)return;
        if(Enabled){
            a.onclick = $(a).data('orgClick');            
        }
        else
        {
            $(a).data('orgClick',a.onclick);
            a.onclick = null;
        }
    });
}

Which can be called with something like:

setEnabled($('#validate'), false);

(also works on jquery objects with multiple elements because of the each)

Example fiddle

answered Nov 9, 2015 at 18:16

Me.Name

12.6k3 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kishore Sahasranaman · Accepted Answer · 2015-11-09 17:24:50Z

0

You need to unbind the click event (which was declared inline) as follows.

document.getElementById("import").onclick = null;
document.getElementById("validate").onclick = null;
document.getElementById("organize").onclick = null;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="menuitems" class="inline textcenter">
  <a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >>
  <a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >>
  <a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >>
  <a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
</p>

answered Nov 9, 2015 at 17:24

Kishore Sahasranaman

4,2504 gold badges27 silver badges52 bronze badges

4 Comments

Peter G. Over a year ago

this might be good for an answer, but I'm looking for a way to keep the event attached and just disable the listener

Kishore Sahasranaman Over a year ago

it is better to handle that logic inside the click function

Peter G. Over a year ago

it would be necessary to change the formatting also through editing the css within the function. not sure if a good idea.

Kishore Sahasranaman Over a year ago

or you may rebind the same click function as document.getElementById("import").onclick = switchScreen('Import');

Cᴏʀʏ · Accepted Answer · 2015-11-09 17:37:57Z

You could have jQuery take over your inline event, so that you can off() it later. Note that off() does remove the listener. You can't really disable it unless you put some logic in the handler itself to bail out if it shouldn't be running.

function switchScreen(screenName) {
  console.log(screenName);
};

$(function() {
  $('#menuitems a').each(function() {
    var oldClick = this.onclick;
    $(this).on('click', $.proxy(oldClick, this));
    this.onclick = null;
  });
  
  $('#import').off('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="menuitems" class="inline textcenter">
    <a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >> 
    <a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >> 
    <a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >> 
    <a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
</p>

Selva Kumar J · Accepted Answer · 2015-11-09 18:13:10Z

0

try unbind instead of Off since click event is defined inline, if click is attached using on then it will work with off.

answered Nov 9, 2015 at 18:13

Selva Kumar J

92 bronze badges

1 Comment

Peter G. Over a year ago

unbind is deprecated and not in use

Sudipta Kumar Maiti · Accepted Answer · 2015-11-09 19:33:29Z

0

Event attached through javascript doesn't recognize by jquery, so javascript and jquery mixed approached can't work properly - that's the reason jquery .off('click'); doesn't detach click event.

Modify html:

  <p id="menuitems" class="inline textcenter">
        <a id="import" href="javascript:void(0);">IMPORT</a> >>
        <a id="validate" href="javascript:void(0);">VALIDATE</a> >>
        <a id="organize" href="javascript:void(0);">ORGANIZE</a> >>
        <a id="export" href="javascript:void(0);">EXPORT</a>
    </p>

Attach click event using jquery:

 $(document).ready(function () {
          $('#import').on("click", function () {
                switchScreen('Import');
            });
            $('#validate').on("click", function () {
                switchScreen('Validate');
            });
            $('#organize').on("click", function () {
                switchScreen('Organize');
            });
            $('#export').on("click", function () {
                switchScreen('Export');
            });
});

Disable click event whenever required:

 $('#import').off('click');
 $('#validate').off('click');
 $('#organize').off('click');
 $('#export').off('click');

The above approach works for all standard browsers but just for IE we can have one more approach:

  $('#validate').attr("disabled", "disabled");
  $('#organize').attr("disabled", "disabled");
  $('#export').attr("disabled", "disabled");

edited Nov 9, 2015 at 19:33

answered Nov 9, 2015 at 17:36

Sudipta Kumar Maiti

1,7091 gold badge13 silver badges19 bronze badges

2 Comments

Barmar Over a year ago

disabled doesn't apply to links: stackoverflow.com/questions/7000927/…

Cᴏʀʏ Over a year ago

disabled is a property -- in jQuery 1.7+ you should manipulate with prop(): e.g. $('#validate').prop('disabled', true);

Collectives™ on Stack Overflow

jQuery: Disable onclick event using off() not working

5 Answers 5

Comments

4 Comments

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related