在代码生成的输入元素上访问 keyup 事件

Question

在我的项目中，我生成 div 个元素，这些元素包含输入字段以及来自我的数据库的请求响应数据，给定搜索参数。我需要能够在其上使用 keyup 事件来做一些额外的工作，但是 class 选择器在使用 append 生成输入时不起作用，即使它在检查时具有 class .

我创建了一个演示它的 CodePen：http://codepen.io/leofontes/pen/PNgabB?editors=1111

HTML

<div class="container" id="container">
  <button id="button">Click</button><br>
</div>

CSS

.container {
  background-color: #F00;
  height: 200px;
  width: 200px;
}

.dynamic-input {
  margin: 5px;
}

Javascript / jQuery

$(document).ready(function () {
  $('#button').click(function() {
    for(var i = 0; i < 5; i++) {
      $('#container').append('<input type="text" class="dynamic-input">')
    }
  });


  $('.dynamic-input').keyup(function() {
    console.log($(this).val());
  });
});

jQuery 代码运行良好，我使用 $(document).ready 函数中生成的输入对其进行了测试，它实现了我的预期，我不明白为什么它在运行时没有运行稍后生成。

我也尝试过隐藏输入 class 已经加载了 HTML 但这也不起作用。

感谢所有想法或建议，谢谢

Answer 1

试试这个：

$(document).ready(function () {
  $('#button').click(function() {
    for(var i = 0; i < 5; i++) {
      $('#container').append('<input type="text" class="dynamic-input">')
    }
  });


  $(document).on('keyup', '.dynamic-input', function() {
    console.log($(this).val());
  });
});

Answer 2

动态生成的元素需要 event delegation。

$('#container').on('keyup', '.dynamic-input', function () {
    console.log($(this).val());
});

Answer 3

那是因为您在创建元素之前执行了 jquery 绑定。当 $('.dynamic-input').keyup 被执行时。您在单击按钮后创建的输入尚不存在。

Answer 4

问题在于您是在创建绑定的同时分别创建按钮。您应该做的是创建输入并将点击事件绑定为回调的一部分。现在，您在语法方面正确地绑定了元素，但它还不存在。所以，你想要的是。

$(document).ready(function () {
  $('#button').click(function() {
    for(var i = 0; i < 5; i++) {
      $('#container').append('<input type="text" class="dynamic-input">')
    }
    //You're still within the scope of the callback, so this is the appropriate location
     $('.dynamic-input').on('keyup, function() {
        console.log($(this).val());
    });

  });

在代码生成的输入元素上访问 keyup 事件

Access keyup event on input element generated by code

html

javascript

css

jquery

keyup