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');

http://stackoverflow.com/questions/19320195/jquery-html-disable-onclick — haim770, Nov 09 '15 at 17:20
`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ᴏʀʏ, Nov 09 '15 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., Nov 09 '15 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ᴏʀʏ, Nov 09 '15 at 17:30
the `unbind()` method is not available as of jQuery 1.7 and bsically I'm looking for a way to just disable the listener so I don't have to reattach the functions associated with the event — Peter G., Nov 09 '15 at 17:33
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, Nov 09 '15 at 17:36

score 1 · Accepted Answer · answered Nov 09 '15 at 18:16

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

score 0 · Answer 2 · answered Nov 09 '15 at 17:24

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 09 '15 at 17:24

Kishore Sahasranaman

3,243
1
20
45

this might be good for an answer, but I'm looking for a way to keep the event attached and just disable the listener – Peter G. Nov 09 '15 at 17:30
it is better to handle that `logic` inside the click `function` – Kishore Sahasranaman Nov 09 '15 at 17:34
it would be necessary to change the formatting also through editing the css within the function. not sure if a good idea. – Peter G. Nov 09 '15 at 17:36
or you may rebind the same click function as `document.getElementById("import").onclick = switchScreen('Import');` – Kishore Sahasranaman Nov 09 '15 at 17:39

Sudipta Kumar Maiti · Answer 3 · 2015-11-09T19:33:29.770

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");

`disabled` doesn't apply to links: http://stackoverflow.com/questions/7000927/should-the-html-anchor-tag-honor-the-disabled-attribute — Barmar, Nov 09 '15 at 17:37
`disabled` is a property -- in jQuery 1.7+ you should manipulate with `prop()`: e.g. `$('#validate').prop('disabled', true);` — Cᴏʀʏ, Nov 09 '15 at 18:02

score 0 · Answer 4 · answered Nov 09 '15 at 17:37

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>

score 0 · Answer 5 · answered Nov 09 '15 at 18:13

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 09 '15 at 18:13

Selva Kumar J

9
2

unbind is deprecated and not in use – Peter G. Nov 10 '15 at 08:47

jQuery: Disable onclick event using off() not working

5 Answers5

Linked