Question

在我的项目中，我根据搜索参数生成包含输入字段的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，但是也没有。

所有的想法或建议都表示赞赏，谢谢

Answer 1

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

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

Answer 2

试试这个：

$(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 3

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

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

  });

Answer 4

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

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

4 个答案: