Question

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

$('#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

Keypress检查不起作用

2 个答案: