將偵聽器添加到動態添加的元素

Question

我試圖將多個事件偵聽器添加到正在動態添加到頁面的元素中。 我嘗試按照許多帖子中的說明使用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，則效果很好。

感謝您提供的任何東西！

Answer 1

您需要在案例中使用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。