We Keep Coding

how to disable all the click events and re-enable them based on a Boolean, which will be coming from a function

I am having some click events(more than 100) in my JS file, and for example code looks like this.
$(document).on('click', '.a', function(){
alert($(this).text());
});
$(document).on('click', '.b', function(){
alert($(this).text());
});
$(document).on('click', '.c', function(){
alert($(this).text());
});
$(document).on('click', '.d', function(){
alert($(this).text());
});
This is just example code, my Click events doing a lot of things, and I can not change the click event code,
Now I have a Boolean which I am getting from a Function based on some condition.
So On first click I want to see if this variable is True then only my click event on particular item should trigger, else click event should not trigger.
let tre = false;//it could be true or false based on function given below based on some condition.
function test(){
return tre;
}
$(document).on('click', '.a', function(){
alert($(this).text());
});
$(document).on('click', '.b', function(){
alert($(this).text());
});
$(document).on('click', '.c', function(){
alert($(this).text());
});
$(document).on('click', '.d', function(){
alert($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="a">a</div>
<br>
<div class="b">b</div>
<br>
<div class="c">C</div>
<br>
<div class="d">d</div>
</section>
Now my Requirement is if I click on any item in the page (a,b,c,d) and if that varibale tre is TRUE then only my alert should work.
I can wrap all my click events in a function if needed, but can't add if condition inside every click event.

how to delegate mousedown and mouseup on a dynamically created div?

rollmark is created dynamically so I need to delegate events to document
Trying to to perform one action while rollmark is pressed, and another one when the mouse is released but I'm getting a syntax error.
pls help.
$(document).on({'mousedown', '.rollmark' function(e){
console.log('down');
},
mouseup: function(){
console.log('up');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='rollmark'>CLICK</div>

I think you need to call .on separately for each handler if you want event delegation:
$(document)
.on('mousedown', '.rollmark', function(e) {
console.log('down');
})
.on('mouseup', '.rollmark', function() {
console.log('up');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='rollmark'>CLICK</div>

You can do it like this:
$(document).on('mousedown', '.rollmark', function(e) {
console.log('down');
}).on('mouseup', '.rollmark', function(e) {
console.log('up');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='rollmark'>CLICK</div>

have you tried putting comma after '.rollmark'?

Click not working, only touchstart mousedown

How do I bind 'click' to a paragraph?
I have the following function:
$(document).on('touchstart mousedown',"p span.text", function(e) {
console.log('I was clicked');
*more code here*
});
If I replace 'touchstart mousedown' with 'click', the function is no longer fired.
PS: I'm SUPER new to JS, so I might be doing something wrong.

Try:
$("p span.text").on('click', function(){
console.log('I was clicked');
});

How do I bind 'click' to a paragraph
Try to attach click event to your paragraph instead of span:
$(document).on('touchstart mousedown click',"p", function(e) {
console.log('I was clicked');
});

This also works:
According to your reply, updated
$(document).on('click',"p span", function(e) {
console.log('I was clicked');
});

How to get the id of element when right clicked

I like to know how to get the id of li when i right click over this li using javascript or jquery.
<ul>
<li id="liid" class="collapsable">
<div class="hitarea collapsable-hitarea">
</div>
<span class="folder">Group1.2</span>
</li>
</ul>
I have the right click function.
$(document).bind("contextmenu", function (e) {
// code to get the id of current li
});
Can any one help me please.

Use .on('contextmenu', 'li')
$(function() {
$('ul').on('contextmenu', 'li', function(e) { //Get li under ul and invoke on contextmenu
e.preventDefault(); //Prevent defaults
alert(this.id); //alert the id
});
});
Demo

This uses event delegation on document and only fires if an li is clicked.
$(document)
.on('contextmenu', 'li', function(e) {
e.preventDefault();
console.log(this.id);
});
Compared to adding a handler on $('ul') or $('li'), this will only bind a single handler.

You can try this
$(function() {
$('li').on("contextmenu", function (e) {
alert(this.id);
e.preventDefault();
});
}
Demo

You can use this..
If you want open also Context Menu on right click then use below code:
$(function() {
$('ul li').on('contextmenu', function() {
alert(this.id);
});
});
and without Context Menu then use below code:
$(function() {
$('ul li').on('contextmenu', function(e) {
e.preventDefault();
alert(this.id);
});
});
Happy New year...

how to cancel some click events in document in JQuery (not all of them)

Click on the document, the .area div disappears.
$(document).on('click', function() {
$('.area').hide();
});
$(document).off('click', '.red', function(e) {
e.stopPropagation();
});
In this case, how can I apply stopPropagation to .red. I'd like to keep this js format, as I will need to add more class names.
Online Sample http://jsfiddle.net/ku9cj/1/
Thanks

off() is used to remove the event handler; you need to use .on()
$(document).on('click', '.red', function(e) {
e.stopPropagation();
});
Demo: Fiddle

You should not attach handlers to the document, as they bubble up very slowly. If you must do so, try the following:
$('body').on('click', function() {
$('.area').hide();
});
$('.red').on('click', function(e) {
e.stopPropagation();
});
Or, if you insist on using a delegate and do not have a closer parent element:
$('body').on('click', '.red', function(e) {
e.stopPropagation();
});