按鍵檢查不工作

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