（jquery/javascript）如何在关键事件后使点击功能工作答案

【问题标题】：(jquery/javascript) How would I make click function work after key event（jquery/javascript）如何在关键事件后使点击功能工作
【发布时间】：2017-04-05 08:08:37
【问题描述】：

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

下面的代码所做的是在一行中打印one two three four，范围从one 开始，当您按左右键时，它会删除前一项的跨度并在下一项上放置一个跨度.

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

问题是：

当屏幕加载，并且没有按下任何键时，单击 spans，例如，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);
})

【问题讨论】：

标签： javascript jquery keyevent

【解决方案1】：

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

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

试试这样的：

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

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

【讨论】：