jquery - 为什么我的动态创建元素的类无法识别？

Question

我有一个文本框。如果选中并按 Tab 键，将打开一个新行。到目前为止，这工作正常。但是，相同的操作在动态创建的文本框中不起作用。即使它与调用原始文本框的类相同。我试图在互联网上找到解释，但我无法得到/理解正确的答案。有人可以帮我吗？

http://jsfiddle.net/RzCLM/1/

$('.list').keydown(function(key){
    if(key.which === 9) {
        $('.ingredients_list').append('<li><input class="list" type="text"/><i><img class="remove" src="images/remove.svg"></i></li>');

    }
}); 

Answer 1

用于$(document).on定位动态创建的元素：

$(document).on('keydown', '.list', function(key){
    if(key.which === 9) {
        $('.ingredients_list').append('<li><input class="list" type="text"/><i><img class="remove" src="images/remove.svg"></i></li>');

    }
}); 

jsfiddle。

Answer 2

那是因为您需要使用事件委托，因为执行.list时新元素不存在.keydown()，请将代码更改为：

$(document).on('keydown','.list',function(key){
        if(key.which === 9) {
            $('.ingredients_list').append('<li><input class="list" type="text"/><i><img class="remove" src="images/remove.svg"></i></li>');

        }
    }); 

JSFiddle Demo