javascript - 无法读取动态创建的文本框的值。面临未定义的 html 错误

Question

我正在动态创建一行 3 个文本框。但我无法读取它们的值。

下面是创建文本框的代码。

$(function() {
  $('#addVNFButton').on('click', function() {
    if (vnfCounter > 10) {
      alert("only 10 vnf's are allowed");
      return false;
    }
    //e.preventDefault();
    $('<div/>').addClass('col-md-12')

      .html('<div class="col-md-3 col-sm-3 col-xs-3"><label class="control-label">Vendor</label> <input type="text" class="form-control" id="vnfVendor"/></div><div class="col-md-3 col-sm-3 col-xs-3"><label class="control-label">Product Name</label> <input type="text" class="form-control" id="vnfProductName"/></div><div class="col-md-3 col-sm-3 col-xs-3"><label class="control-label">Release</label> <input type="text" class="form-control" id="vnfRelease"/></div>')
      .append($('<button/>').addClass('btn btn-action remove').text('Delete'))
      .insertAfter($('#vnfSection'));
    vnfCounter++;
  });
});

上面的代码在一行中创建了 3 个文本框，如下所示。

下面是我尝试读取值的代码。

for (var i = 1; i < vnfCounter; i++) {
  var vnfVendor = "";
  var vnfProduct = "";
  var vnfRelease = "";
  vnfVendor += $('#vnfVendor' + i).val();

  vnfProduct += $('#vnfProductName' + i).val();
  vnfRelease] += $('#vnfRelease' + i).val();
}

我得到的结果是未定义的 html 对象。请帮忙

Answer 1

您正在使用关闭的 div 标签 <div/>而不是打开 div 标签 <div> .

$('<div>').addClass('col-md-12')

希望对您有所帮助。快乐编码...!