Keypress check not working

Question

Если я добавлю панель поиска сразу, она работает, консоль возвращает значение поля поиска каждый раз, когда я нажимаю клавишу ввода, но если я добавлю строку поиска после щелчка изображения, Работа.

http://codepen.io/Nadaga/pen/QEVaGA

$('#glass-image').on('click', function() { 
$('#main').html('<input id="search-field" type="text" placeholder="Search"></input>'); 

})

$('#search-field').keypress(function (e) { 
    if (e.which == 13) { 
    console.log($('#search-field').val()); 
    return false;  
    } 
}); 

Answer 1

В виду того что search-field создается динамически, оно должно быть добавлено, как это (на $document),

$(document).on('keypress', '#search-field' ,function(e) { 
    if (e.which == 13) { 
    console.log($('#search-field').val()); 
    return false; 
    } 
}); 

Answer 2

$('#glass-image').on('click', function() { 
$('#main').html('<input id="search-field" type="text" placeholder="Search"></input>'); 
    $('#search-field').keypress(function(e) { 
    if (e.which == 13) { 
    console.log($('#search-field').val()); 
    return false; 
    } 
}); 
}) 

Событие Click работает только в том случае, если элемент уже существует в html-коде. Таким образом, событие click не срабатывает. Он не будет рассматривать новый элемент, который создается динамически после загрузки страницы. Динамические элементы создаются с помощью javascript или jquery (не в html).

источник: https://stackoverflow.com/a/29674985/1848140