Keypress check not working

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

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コード内に存在する場合にのみ機能します。したがって、クリックイベントは発生しません。ページがロードされた後に動的に作成される新しい要素は考慮されません。動的要素は、javascriptまたはjquery（htmlではなく）の助けを借りて作成されます。

ソース：ソリューションおよび説明のためのhttps://stackoverflow.com/a/29674985/1848140