啟用和禁用onclick功能

Question

我正在動態創建一個表格，我在每個列中添加onclick函數。

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);

    }
}

在特定情況下，我想禁用onclick功能。 這是代碼，它的工作原理。

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

在另一種情況下，我想重新連接onclick功能。 這不起作用。 我想啟用原始功能....

有任何想法嗎 ？

Answer 1

您創建表並添加/刪除事件的方式不易維護。 我也有一些建議：

• 檢查代碼並單獨定義代碼單擊處理程序。
• 如果你在項目中使用jQuery，那么每次使用它都會在任何地方使用它。
• 在你的代碼中i是未定義的。

使用jQuery添加刪除事件偵聽器

首先定義你的處理函數：

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

選擇元素並分配給變量。 <div id="clickable">Click Me!</div>必須在執行以下腳本時位於DOM中。

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

element.on('click',myClickHandler);

// remove event listener:

element.off('click',myClickHandler);

請注意，您必須通知jQuery應刪除哪個處理程序。

請參閱示例https://codepen.io/softberry/pen/BEpove

Answer 2

另一種方法是構建一個檢查“kill switch”的click處理程序。

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;
});