Почему класс моего динамически созданного элемента не распознается?

Question

У меня есть текстовое поле. Если выбрано и нажмите клавишу табуляции, откроется новая строка. Пока это прекрасно. Однако одно и то же действие не работает в динамически создаваемом текстовом поле. Даже если он имеет тот же класс, который был вызван исходным текстовым полем. Я попытался найти объяснения в Интернете, но я не мог получить/понять правильный ответ. Может кто-нибудь, пожалуйста, помогите мне?

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