Question

代码：

var appender = $('<input class="form-control" placeholder="Search" id="search_made" type="text">')
appender.find('#search_made').on('keypress', function(e) {
  e.preventDefault()
  console.log('keypress!')
  if (e.keyCode == 13 && !e.shiftKey) {
    console.log('not shift enter')
    var passed_value = $(this).val()
    if (passed_value === '') {
      console.log('nothing was passed on input tag')
      return false;
    }
    console.log('passed value: ' + passed_value)
  }
})

$('body').append(appender)

我想通过jQuery动态添加input标签。

使用这些代码，我似乎只能添加输入标签，但是必须绑定的其他功能绑定得不好。

因此，当我在输入标签上键入一些单词并单击enter key时，它将刷新页面，但不执行任何console.log()行。

如何修复它以使其很好地执行其他绑定功能（包括console.log()）？

Answer 1

从以下位置更改选择器：

appender.find('#search_made').on('keypress', function(e) {

收件人

$(document).on('keypress','#search_made', function(e) {

或：简单

appender.on('keypress', function(e) {

工作代码示例：

var appender = $('<input class="form-control" placeholder="Search" id="search_made" type="text">')
$(document).on('keypress','#search_made', function(e) {
  e.preventDefault()
  console.log('keypress!')
  if (e.keyCode == 13 && !e.shiftKey) {
    console.log('not shift enter')
    var passed_value = $(this).val()
    if (passed_value === '') {
      console.log('nothing was passed on input tag')
      return false;
    }
    console.log('passed value: ' + passed_value)
  }
})

$('body').append(appender)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery或javascript阻止输入键盘事件

1 个答案: