(jquery/javascript) 我如何让点击功能在按键事件后起作用

Question

我有两个 id 分别为 "display" 和 "display2" 的 div，我将函数的结果放在其中。

下面的代码所做的是连续打印 one two three four，范围从 one 左右开始，当您按下左右键时，它会删除前一项的范围并放入下一项的跨度。

我在最底下还有一个点击功能，当点击span时，display2会显示一个应该向上计数的数字。

问题是：

当屏幕加载且未按下任何键时，单击跨度，例如，one 将正常增加显示 2 中的数字计数。

一旦我按下左右键，假设跨度为 three，如果我单击尝试单击 three，#display2 中的计数器不会执行任何操作。为什么会这样，我该如何解决？

   var arr1 = ["one ", "two ", "three ", "four "];
    var arr2 = ["<span>one </span>", "two ", "three ", "four "];
    var counter = 0;

function count(){
  if (counter>0 && event.keyCode==37){
    counter--;
  }
  else if (counter<3 &&event.keyCode==39){
     counter++;
           }
}

function spaN() {
  arr2[counter] = '<span>' + arr1[counter] + '</span>';
    if (event.keyCode==37){
   arr2[counter+1] = arr1[counter+1];
  }
  else if (event.keyCode==39){
   arr2[counter-1] = arr1[counter-1];  
           }
}

$(document).keydown(function(event){
switch(event.keyCode){
  case 37:
    count();
    spaN();
    $('#display').html(arr2);
    break;
  case 39:
    count();
    spaN();
    $('#display').html(arr2);    
    break;
       }
});

$('#display').html(arr2);

var k = 0;
$('span').click(function(){
k++;
 $('#display2').html(k);
})

Answer 1

这一行可能导致了问题：$('span').click(function(){....

该选择器将为您提供页面上的所有 Current span 标签。更新显示后，其中的跨度不再与事件绑定到的跨度相同。因此，您需要将事件委托给文档、正文或显示，以便在显示中插入的任何新跨度也可以使用点击处理程序。另一种方法是在每次设置显示的 .html() 时手动重新分配点击处理程序，但那样效率很低。

尝试这样的事情：

$('body').on('click', 'span', function() {
    k++;
    $('#display2').html(k);
});

基本上，您告诉正文，运行单击任何跨度后该功能。这将在运行时进行检查，因此它将应用于任何未来创建的跨度，只要 body 标签本身没有被替换。

(jquery/javascript) 我如何让点击功能在按键事件后起作用

(jquery/javascript) How would I make click function work after key event

javascript

jquery

keyevent