我正在尝试向动态添加到页面的元素添加多个事件监听器。我尝试按照许多帖子中的说明使用 on() 函数,但它们似乎都不起作用。单击该页面时,应添加一个新页面,其格式由正确的 CSS 类确定。当某个特定焦点被聚焦时,它应该可以使用 WASD 和 jquery animate() 进行移动。这是我现在拥有的:
$(document).ready( function() {
var $index = 0;
$('div').on('keydown', 'div' , function(key) {
switch(parseInt(key.which,10)) {
case 87: //W
$(this).animate({top: '-=10px'}, 'fast');
break;
case 65: //A
$(this).animate({left: '-=10px'}, 'fast');
break;
case 83: //S
$(this).animate({top: '+=10px'}, 'fast');
break;
case 68: //D
$(this).animate({left: '+=10px'}, 'fast');
break;
default:
break;
}
});
$(document).click( function() {
// if(key.which == 13)
{
var $toadd = "<div class='";
switch($index % 4)
{
case 0:
$toadd += "red' tabindex='"+ ($index + 1) + "'></div>";
$index++;
break;
case 1:
$toadd += "green' tabindex='"+ ($index + 1) + "'></div>";
$index++;
break;
case 2:
$toadd += "blue' tabindex='"+ ($index + 1) + "'></div>";
$index++;
break;
case 3:
$toadd += "yellow' tabindex='"+ ($index + 1) + "'></div>";
$index++;
break;
default:
break;
}
$('body').append($toadd);
// $('body').on('click keydown','div', function() {
// $('body').append($toadd);
// });
}
});
});
目前DIV是通过点击页面添加的,但无法使用WASD移动。 s 是可聚焦的,以便 animate 功能发挥作用。如果我通过单击删除动态添加并放置一些 static ,效果很好。
感谢您提供的一切!
最佳答案
在您的案例中,您需要使用 on()
进行事件委托(delegate)。
$(document).on('keydown', '.red, .green, .blue, .yellow' , function(key) //Instead of document use a container that exists in DOM at any given time to have the event delegated to these divs.
这样,您可以将事件附加到文档头或任何包含这些 div 的容器,而这些容器又将被委托(delegate)给现在存在的任何这些 div 或将来添加的内容。
关于javascript - 将监听器添加到动态添加的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17128897/