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

Access keyup event on input element generated by code

本文关键字：keyup 事件 输入 代码生成 访问 元素      更新时间：2023-09-26

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

我创建了一个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函数中生成的输入对它进行了测试，它达到了我的预期，我不明白为什么以后生成时没有

我还试着用已经加载了HTML的类进行隐藏输入，但这也不起作用。

感谢所有想法或建议，

动态生成的元素需要事件委派。

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

试试这个：

$(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());
  });
});

问题是创建按钮与创建绑定是分开的。您应该做的是创建输入AND，将单击事件绑定为回调的一部分。现在，您正在正确地绑定元素，从语法角度来看，但它还不存在。所以，你想要的是。

$(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());
    });
  });

这是因为在创建元素之前执行了jquery绑定。当执行CCD_ 1时。单击按钮后创建的输入还不存在。

相关文章：