Question

我有一个包含动态创建的文本输入的表单（它们具有类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);
    });

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>

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

1 个答案: