Enable and disable onclick funtion

Question

I am dynamically creating a table where i am adding onclick function to each column.

for (var x = 0; x < r.length; x++) {
    //Setting the columns
    if (i === 1) {
        var headerCell = document.createElement("TH");
        headerCell.innerHTML = r[x];
        headerCell.id = x;
        headerCell.onclick = function () {
            sortTable(this.id, name);
        }
        row.appendChild(headerCell);

    }
}

In a specific situation I want to disable the onclick function. Here is the code and it works.

 $('#errorTable TH').prop("onclick", null).off("click");

and in another situation i want to reattach the onclick function. And that doesn't work. I want to enable the original function....

Any ideas ?

Answer 1

The way you created your table and adding/removing events are not easily maintainable. I also have some suggestions:

• Review your code and define code click handler separately.
• If you use jQuery in your project use it every where, if not, do not use it anywhere.
• In your code i is undefined.

Add Remove Event Listener with jQuery

First define your handler function:

var myClickHandler = function(){
// this is your click handler
    alert('Yes!!!');
}

Select your element and assign to a variable. <div id="clickable">Click Me!</div> must be in the DOM at the time of below script executed.

var element = $('#clickable');
// assign event listener

element.on('click',myClickHandler);

// remove event listener:

element.off('click',myClickHandler);

note that you must have to inform jQuery which handler should be removed.

See a sample https://codepen.io/softberry/pen/BEpove

Answer 2

An alternative is to build a click handler that checks a "kill switch".

var tableClickable = true;

headerCell.onclick = function () {
  if (tableClickable) {
    sortTable(this.id, name);
  }
}

//In a specific situation I want to disable the onclick function.
something.addEventListener('someEvent', function () {
  tableClickable = false;
});

//and in another situation i want to reattach the onclick function.
something.addEventListener('someOtherEvent', function () {
  tableClickable = true;
});