.off event not disabling click event


#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.