Enable and disable a click event with JQuery

Question

I have some HTML elements

<p class="accordion-header open" id="platform_0" onclick="validateScreens(this)">Platform 0</p>
<p class="accordion-header open" id="platform_1" onclick="validateScreens(this)">Platform 0</p>
<p class="accordion-header open" id="platform_2" onclick="validateScreens(this)">Platform 0</p>

I want to remove and restore the click event on this element. My JavaScript code is :

function validateScreens(domObj)
{   
  if(some condition)
  {  
    $(domObj).off("click"); // //remove click from  <p> whenever there is a click event
  } else {
    $(domObj).on("click",function() { return true; });// restores the click event      
  }
}

It is removing the click event successfully but not restoring it.How to do it.

Once the click event handler removed, how you can restore the same inside the click event which is never going to call once again as you removed it? — Aruna
– Aruna, Commented Nov 27, 2016 at 2:26

Sumesh S · Accepted Answer · 2016-11-27 02:29:06Z

1

<p class="accordion-header open" id="platform_0" onclick="validateScreens(this)">Platform 0</p>
<p class="accordion-header open" id="platform_1" onclick="validateScreens(this)">Platform 0</p>
<p class="accordion-header open" id="platform_2" onclick="validateScreens(this)">Platform 0</p>
<script>
function validateScreens(domObj){   
       if(some condition){  
           $(domObj).on("click" , function( e ){ e.preventDefault(); }); 
     }else{
           $(domObj).on("click",function() {  return true; });
        }
}</script>

when event.preventDefault method is called the default action of the event will not be triggered.

Read More on : https://api.jquery.com/event.preventdefault/

edited Nov 27, 2016 at 2:29

answered Nov 27, 2016 at 2:23

Sumesh S

7585 silver badges12 bronze badges

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

1 Comment

zer00ne Over a year ago

What's the default action for a <p>?

Muhammad Omar ElShourbagy · Accepted Answer · 2016-11-27 02:54:08Z

0

Why not trying different approach of having this check in the event handler itself

var allowClick = true;

function validateScreens(domObj) {
    if (some condition) {
        allowClick = true;
    } else {
        allowClick = false;
    }
}

$(domObj).on("click", function() {
    if (allowClick) {
        // Do click logic here
    }
});

answered Nov 27, 2016 at 2:54

Muhammad Omar ElShourbagy

7,1182 gold badges34 silver badges51 bronze badges

Comments

RizkiDPrast · Accepted Answer · 2016-11-27 02:55:18Z

0

put it inside same If condition. please try this one:

if(some condition)
  {   
     //remove click and restore it
    $(domObj).off("click").on("click",function() { return true; });
  } else {
    // anything else if false      
  }

answered Nov 27, 2016 at 2:55

RizkiDPrast

1,7251 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

Enable and disable a click event with JQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related