javascript - 按键检查不起作用

Question

如果我立即添加搜索栏，它会起作用，每次我按 Enter 键时控制台都会返回搜索字段的值，但如果我在单击图像后添加搜索栏，则它不起作用。

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

由于搜索字段是动态创建的，因此必须像这样添加它(在$document上)，

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