（jquery/javascript）如何使click函数在关键事件之后工作

我有两个id为“display”和“display2”的div，我将函数的结果放在其中

下面的代码所做的是将

1234

打印成一行，跨距从

one

开始，当您按左右键时，它会删除上一项上的跨距，并在下一项上设置跨距

我在最底部还有一个点击功能，当点击span时，display2将显示一个应该计数的数字

问题是：

当屏幕加载且未按下任何键时，单击span，例如，

one

通常会增加显示屏2中的数字计数

一旦我按下左右键，假设跨度为

three

，如果我单击try click

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

var arr1=[“一”、“二”、“三”、“四”]；
var arr2=[“一”、“二”、“三”、“四”]；
var计数器=0；
函数计数（）{
if（计数器>0&&event.keyCode==37）{
计数器--；
}
else if（counter此行可能导致问题：
$（'span'）。单击（function（）{..

该选择器将获取页面上的所有当前span标记。
更新显示后，其中的跨度不再与事件绑定到的跨度相同。
因此，您需要将事件委托给文档、主体或显示器，以便在显示器中插入的任何新跨距也可以使用单击处理程序。
另一种方法是在每次设置显示的.html（）时手动重新分配单击处理程序，但这样做效率低下

试着这样做：

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

基本上，你告诉主体，一旦点击任何跨度，就运行该函数。这将在运行时被检查，因此它将应用于任何未来创建的跨度，只要主体标记本身没有被替换