按键检查不工作

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; 
    } 
}); 
}) 

只有当元素已存在于html代码中时，Click事件才有效。所以click事件不会触发。它不会考虑在页面加载后动态创建的新元素。动态元素是通过javascript或jquery（而不是html）创建的。

来源：https://stackoverflow.com/a/29674985/1848140