javascript - (jquery/javascript)如何让点击功能在关键事件后工作

Question

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

下面的代码的作用是打印 one two three four连续，跨度从 one 开始当您按向左键和右键时，它会删除上一个项目的跨度并在下一个项目上添加跨度。

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

问题是:

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

一旦我按下左右键，假设跨度为 <span>three</span> ，如果我点击尝试点击 <span>three</span> ，#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(){....

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

尝试这样的事情:

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

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