1

我正在尝试将多个事件侦听器添加到动态添加到页面的元素。我尝试使用 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 可以使动画功能起作用。如果我通过单击删除动态添加并放置一些 static ，效果很好。

感谢您提供的任何东西！

4

1 回答 1

0

您需要on()在您的情况下使用事件委托。

$(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 的容器，而这些容器又将被委托给现在存在或将来添加的任何这些 div。

于 2013-06-15T23:36:23.057 回答