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

Answer 1

One way would be to temporarily set the onclick to null, but store the original element onclick in the element or jquery object (eg 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

Answer 2

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>

Answer 3

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

Answer 4

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>

Answer 5

尝试取消绑定而不是关闭，因为点击事件是内联定义的，如果点击是使用 on 附加的，那么它将与关闭一起工作。