.off event not disabling click event

JavaScript
1

I have put together some simple code as an exercise and seem to be having a problem disabling a click event using .off(‘click’); method. The idea is when a change occurs is to apply a class and disable the click event. The class is being applied ok but the button, #srcsubmit is still clickable.

I am quite new to jquery and js and would appreciate if someone could point out my error. Thanks

// Disable click event on #srcsubmit
// This section is where #srcsubmit is still clickable
$(function() {
  $('#dept').on('change', function() {
    depts = $('#dept option:selected').html();
    $("#srcsubmit").off('click');
    $("#srcsubmit").addClass('disable');
    $('.srchBoxError').html(' ');
  });
});

// Enable click event on #srcsubmit
$(function() {
  $('#bdReset').on('click', function() {
    $('#srcsubmit').removeClass('disable');
    $('.srchBoxError').html(' ');
  });
});

$(function() {
  $(document).on('click', '#srcsubmit', function() {
    $('.srchBoxError').html('Just a click test');
  });
});
2

That’s because you try to remove the direct event, not the delegated event that you have set up.

3

Thanks for reply Dormilich. However, I am quite new to js and jquery and have been struggling with this for ages. Could you please do an example based on my code. Many thanks

4

What he means is:

Target is the $(“srcsubmit”).

Target is the document.

jQuery has an instructional page on event delegation that may help you understand this better.

Long and the short: Make your .off() command mimic the .on() command that you are trying to undo. .off() takes (almost) the same parameter structure that .on() does, for just this reason.

5

Thanks for reply. I am struggling with this and after reading the link I made some changes but the click event on #srcsubmit is still not working. I have made a fiddle and perhaps you would be kind enough to correct my code as I am totally stuck with this. Many thanks

Fiddle:http://jsfiddle.net/0r2qpnLw/85/

6 
$("#srcsubmit").on("click");

… what’re you trying to do with these lines? Cause it’s doing nothing.

7

Thats the problem. I am trying to turn the click event back on. You mean the line in #bdReset or #srcsubmit function? Thanks

8

http://api.jquery.com/off

9

I mean…

You’ve put an enable trigger for the click function… inside… the click function.

  	$('#srcsubmit').on('click', function () {
    //$('#srcsubmit').on("click");
    $('.srchBoxError').html('Just a click test');
  });
});

The only way that commented line ever gets called is if the function is currently attached. So we… don’t need to attach it again there, surely. (Note: On/Off is not a disable/enable switch, it’s a New Bind / Remove Bind. If you bind multiple ‘on clicks’ to an element, it will fire ALL of them when the element is clicked.)

So, lets make things a little easier on ourselves. Let us define our function separately.

function clickableButton() {
    $('.srchBoxError').html('Just a click test');
}

Why? So we have a name to use later.
Now. We want the function to be bound to the button on load.

$(function () {
   $('#srcsubmit').on('click', clickableButton);

simple enough. Now, if we change the dept selectbox, we want to disable the click. And the button, while we’re at it. (Note: I’m still inside the same $(function() { from before)

  $('#dept').on('change', function () {
    depts = $('#dept option:selected').html();
    $("#srcsubmit").off("click");
    $("#srcsubmit").addClass('disable');
    $('.srchBoxError').html(' ');
  });

Simple enough again. We could have said $("#srcsubmit").off("click",clickableButton);, if there were other click events on the button that we didnt want to touch. We’ll see that in a second.

Now, we want to ENABLE the button if the reset button is clicked. But there’s a problem. We don’t know if the event is already active when someone clicks that button. If we bind another .on to it, we might be binding a second click event. So we need to be a little more sneaky. How do we guarantee that there is only one instance of our click event on the button?

For an example, I’m going to use oranges. When i invoke .on, I give you an orange. If i do it twice, I give you two oranges. I dont want that. But, when I invoke .off(), I take away all oranges, regardless of the number of oranges.

So, how do I guarantee that you only have 1 orange when i’m done, using only these two operations, and not knowing how many oranges you currently have? First, I take away your oranges. Then i give you one.

  $('#bdReset').on('click', function() {
    $("#srcsubmit").off("click",clickableButton).on("click",clickableButton);
    $("#srcsubmit").removeClass('disable');
    $('.srchBoxError').html(' ');
  });
});

(The extra }); is me finally closing that onload call from the first block of code)

10

Dormilich i have read that until i know it parrot fashion. I just cannot follow the logic. Hence the post here. Can you not just update my fiddle so I can see how it is supposed to be done. Thanks

11

m_hutley

Excellent works well. I can also follow the logic and understand how you put this together. Many thanks for all yur help and time. Cheers

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.