Javascript 为什么我的.off（）事件处理程序不关闭该函数？

在我的

resetTable

函数中，在它创建一个新表之后，在最底部我调用我的

hover（）

函数，这样草图板就可以工作了。但是，由于

hover（）

函数包括更改表格单元格的背景色，因此我需要将其关闭，以便我的

trail（）

函数可以更改表格单元格的不透明度

我制作了一个

resetTableTrail

函数，它调用原始的

resetTable（）

函数，然后应该关闭

hover（）

函数，并允许

trail（）

函数接管，但情况似乎并非如此

这是一个现场演示：

以下是我的代码的相关部分：

$(function() {
  buildTable(16);
  hover();
  resetTable();
  trail();
  randomColorHover();
  resetTableTrail();
});



// Hover Function To Add Colors
function hover() {
  $('td').hover(function() {
    $(this).css('background-color', 'rgb(90,188,215)');
  },

  function() {
    $(this).css('background-color', 'rgb(90,188,215)');
  });
};


// Rebuilds Table When Button Is Clicked
function resetTable() {
  $('button').on('click', function() {

    var choice = prompt("How many columns and rows would you like? Please pick a number between (1 & 64).", "16");

    if (choice < 1 || choice > 64) {
      alert("That was not a valid entry, please specify a number between (1 & 64)");
      return null;
    }

    else {
      var resetColor = $('td').css('background-color', 'rgb(215,215,215)');
      var removeTable = $('table').remove();
      buildTable(choice);
      $('td').on("click", hover() );
    }
  });
}

// If the hover call is in the original resetTable function
// Then it doesn't allow for the trail mode to properly run
// So I created a new function that allows for the trail mode
// To run properly, and also allows for the normal button
// To reset the grid and then call the hover function 
// When the grid resets
function resetTableTrail() {
  $('#trail').click(function() {

    resetTable();

    $('td').off("click", hover() );

    trail();

  });
}


// Creates Trail
function trail() {
  $("#trail").click(function() {
    $('td').hover(function() {
      $(this).css('opacity', '0');
    },

    function() {
      $(this).fadeTo('slow', 1);
    });
  });
};

$（函数（）{
构建表（16）；
悬停（）；
可重置（）；
trail（）；
随机颜色悬停（）；
resetTableTrail（）；
});
//悬停功能添加颜色
函数hover（）{
$（'td'）。悬停（函数（）{
$（this.css（'background-color'，'rgb（90188215）'）；
},
函数（）{
$（this.css（'background-color'，'rgb（90188215）'）；
});
};
//单击按钮时重建表
函数可重置（）{
$（'button'）。在（'click'，function（）上{
var choice=prompt（“您想要多少列和行？请在（1和64）之间选择一个数字。”，“16”）；
如果（选项<1 | |选项>64）{
警报（“该条目无效，请指定一个介于（1&64）之间的数字”）；
返回null；
}
否则{
var resetColor=$（'td'）.css（'background-color'，'rgb（215215215215）'）；
var removeTable=$（'table'）.remove（）；
构建表（选择）；
$（'td'）。在（“单击”，悬停（））；
}
});
}
//如果悬停调用位于原始可重置函数中
//然后它不允许trail模式正常运行
//所以我创建了一个新函数，它允许trail模式
//正常运行，并允许正常按钮
//重置网格，然后调用悬停函数
//当网格重置时
函数resetTableTrail（）{
$（'#trail'）。单击（函数（）{
可重置（）；
$（'td'）.off（“单击”，悬停（））；
trail（）；
});
}
//创造线索
函数trail（）{
$（“#trail”）。单击（函数（）{
$（'td'）。悬停（函数（）{
$（this.css（'opacity'，'0'）；
},
函数（）{
$（this.fadeTo（'slow'，1）；
});
});
};

你真的应该把你的演示缩小到能代表你的问题的最小限度

话虽如此，我不确定演示中会出现什么行为，但您使用了不正确的语法将事件处理程序传递给

on（）

您希望将函数作为引用传递，而不是调用它

更改：

$('td').on("click", hover() );

到

对于

off（）

我在您的

hover（）

中猜测您只想影响clciked元素。由于您将处理程序作为引用传递，因此可以使用

this

访问悬停函数中单击的

td

的当前实例

function hover() {
    var $el = $(this).hover(function () {
        $el.css('background-color', 'rgb(90,188,215)');
    },

    function () {
        $el.css('background-color', 'rgb(90,188,215)');
    });
};

off（）

应参考

on（）

附加的函数

那么这个

$('td').off("click", hover() );

是错误的，因为悬停不返回任何函数

您最好在此处使用命名空间事件。设置：

.on('click.somename', function() {} )

并删除：

.off('click.somename'); // note - does not need function reference here.

但我个人会在这里使用一个附加到表本身的处理程序：

$('table').on('click','td', function() { ... })  

在这种情况下，不需要在表操作中添加/删除处理程序

$('table').on('click','td', function() { ... })