Javascript 使用jQuery提交单个动态生成的输入

我有一个表单，其中包含动态创建的文本输入（它们有serialNumber类）。一旦文本输入到其中一个输入中，下面的脚本将检查文本并将结果返回到动态创建的DIV（serialNumberSearchResults）中

下面的代码将提交，但是发布的serialNumber值为空。我一直在寻找一个解决方案，但是它们似乎都需要使用唯一的ID，我不能这样做，因为输入和div是动态生成的

<div name="serialNumberBox">
  <table width="100%" border="0" cellspacing="0" cellpadding="5">
    <thead>
      <tr>
        <td>Serial number</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" class="serialNumber" name="serialNumber[]" placeholder="enter serial number">
          <div class="serialNumberSearchResults"></div></td>
      </tr>
    </tbody>
  </table>
</div>



    // check serial number
    $(document).on('keyup', '.serialNumber', function () {
        // wait 0.5 second before acting
        delay(function() {
            // submit the form
            $.ajax({
                type: 'POST',
                url: 'assetProcess.php',
                data: { serialNumber: $(this).val() },
                success: function(response) {
                    if (response != undefined) {
                        $(this).closest('.serialNumberSearchResults').html(response);
                    }
                },
                error: function() {
                    $(this).closest('.serialNumberSearchResults').html('Error! Plese try again.');
                }
            });
            return false;
        }, 500);
    });

序列号
//检查序列号
$（文档）.on（'keyup'，'.serialNumber'，函数（）{
//等待0.5秒后再行动
延迟（函数（）{
//提交表格
$.ajax({
键入：“POST”，
url:'assetProcess.php'，
数据：{serialNumber:$（this）.val（）}，
成功：功能（响应）{
如果（响应！=未定义）{
$（this）.closest（'.serialNumberSearchResults'）.html（响应）；
}
},
错误：函数（）{
$（this）.closest（'.serialNumberSearchResults'）.html（'错误！请重试'）；
}
});
返回false；
}, 500);
});

您正试图在闭包中引用此。在该上下文中，

此

将返回

窗口

要解决这个问题，请在闭包外部定义

.serialNumber

，首先使用如下所示的变量

$(document).on('keyup', '.serialNumber', function () {
    var $this = $(this);
    // wait 0.5 second before acting
    delay(function() {
        // submit the form
        $.ajax({
            type: 'POST',
            url: 'assetProcess.php',
            data: { serialNumber: $this.val() },
            success: function(response) {
                if (response != undefined) {
                    $this.closest('td').find('.serialNumberSearchResults').html(response);
                }
            },
            error: function() {
                $this.closest('td').find('.serialNumberSearchResults').html('Error! Plese try again.');
            }
        });
        return false;
    }, 500);
});

另一件需要注意的事情是如何使用。它将只通过向上遍历来搜索当前元素的祖先

在这种情况下，获得所需的另一个功能是使用

但是，

$。同级

可能返回多个元素。实现您想要的另一种方法是首先遍历1层，然后使用

使用类也不会有问题，因此请随意将结果div更改为：

<div class="serialNumberSearchResults"></div>

你应该给你的

一个“id”或“class”，而不是“name”。我从“name”切换到了“class”，现在得到了这个错误：Uncaught TypeError:无法读取未定义的属性“toLowerCase”为什么在动态创建div的脚本中不给div一个唯一的id？谢谢，在你的解释之后，这很有意义。我现在觉得有点傻！