javascript - 意外的 ionicons 行为

Question

考虑这个 code .我无法弄清楚为什么它的行为如此。我需要的只是每次在 <td> 中单击任意位置 时播放图标与暂停图标交替出现。 .当我在 <td> 中单击时，它的行为符合预期但在图标本身之外。但是，如果我单击图标本身，它第一次表现良好，然后停止。

'ionicon 包裹在 <a> 中标签，它是 <td> 的子标签元素。事件监听器在 <td> 上, 那么可能是什么问题呢？

谢谢。

Answer 1

正如@Vijai 所说，您的悬停事件存在问题。虽然我对您的元素了解不多，但您确实需要 .empty() 悬停，或者您只需要 hide() 图标 .. 你可以试试这部分代码而不是你的

var hovOn = function(event) {
  if($(this).find('a').length < 1){
    $(this).html(playButtonTemplate);
  }else{
    $(this).find('a').show();
  }   
};
var hovOff = function(event) {
  $(this).find('a').hide();
}

Codepen Here