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

Question

我有一个包含动态创建的文本输入的表单(它们具有序列号类)。将文本输入到这些输入之一后，下面的脚本将检查文本并将结果返回到动态创建的 DIV (serialNumberSearchResults) 中。

下面的代码将提交，但发布的序列号值为空。我一直在寻找解决方案，但它们似乎都需要使用唯一的 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);
    });

Answer 1

您正在尝试在闭包中引用this。在这种情况下，this 将返回 window。

要解决此问题，请先在闭包外部使用变量定义 .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);
});

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

在这种情况下获得所需内容的替代函数是使用 $.siblings() .

但是，$.siblings 可能会返回多个元素。实现您想要的效果的另一种方法是首先向上遍历 1 级，然后使用 $.find() .

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

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