点击加号图标时jQuery无法动态生成input文本框问题求助

我想实现点击加号图标时生成新的<input type="text">控件，但点击后没有反应，相关代码如下：

原JS代码 #

$('#dvDVRdata1 .add').on('click', function() {
  addDynamicTextbox();
});

function addDynamicTextbox() {
  //alert('icon clicked');
  var numItems = $('#dvDVRdata1').length;
  alert(numItems);
  if (numItems != 5) {
    var lastfieldsid = $('#dvDVRdata1 input').last().attr('id');
    if ($('#' + lastfieldsid).val() != "") {
      var id = parseInt(lastfieldsid.substr(13, lastfieldsid.length));
      var tr2 = $("#dvDVRdata1" + id + "");
      var tr = "<tr id='dvDVRdata1" + (id + 1) + "'><td><div class=''><div class=''><div class='' id='dvDVRdata1" + (id + 1) + "'><label>DVR Address</label><span><input type='text'  value='' name='nmDVRAddress" + "' id='txtDVRAddress" + (id + 1) + "'/></span></div></span></div></span></div></div><div class='minus'><i class='fa fa-times' aria-hidden='true'></i></div></td></tr>"
    }
  }
}

原HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6" id="dvDVRdata1">
  <div class="form-group">
    <label for="">DVR Address </label>
    <input type="text" class="form-control" id="txtDVRAddress1" runat="server" />
  </div>
  <div class="add">
    <i class="fa fa-plus" aria-hidden="true"></i>
  </div>
</div>

你的代码存在几个关键问题，导致新控件无法生成：

• 数量统计逻辑错误：$('#dvDVRdata1').length是获取父容器的个数，永远为1，根本起不到限制最多5个输入框的作用，应该统计容器内的输入框组数。
• HTML结构错误：你生成了<tr>标签，但页面里没有对应的<table>容器，浏览器会直接忽略这类不匹配的标签；同时生成的HTML字符串里有多余的闭合标签（比如多了两个</span>）。
• 核心缺失：未将生成元素插入DOM：你拼好了HTML字符串，但没有执行插入页面的操作，自然看不到新控件。
• 空值判断限制：如果最后一个输入框为空，就无法新增，这个逻辑如果不是刻意需求，会影响功能测试。

修复后的完整代码 #

HTML（新增统一容器存放输入框组） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-sm-6" id="dvDVRdata1">
  <!-- 用这个容器统一管理所有输入框组 -->
  <div id="inputContainer">
    <div class="form-group">
      <label for="">DVR Address </label>
      <input type="text" class="form-control" id="txtDVRAddress1" runat="server" />
    </div>
  </div>
  <div class="add">
    <i class="fa fa-plus" aria-hidden="true"></i>
  </div>
</div>

JS（修复逻辑并添加DOM插入操作） #

$('#dvDVRdata1 .add').on('click', function() {
  addDynamicTextbox();
});

function addDynamicTextbox() {
  // 统计当前输入框组的数量
  var inputGroupCount = $('#inputContainer .form-group').length;
  // 限制最多生成5个
  if (inputGroupCount >= 5) return;

  // 获取最后一个输入框的ID并提取数字部分
  var lastInputId = $('#inputContainer input').last().attr('id');
  var idNum = parseInt(lastInputId.replace('txtDVRAddress', ''));
  var newId = idNum + 1;

  // 检查最后一个输入框是否为空（不需要可删除）
  if ($('#' + lastInputId).val().trim() === '') {
    alert('请先填写当前的DVR地址');
    return;
  }

  // 生成和原有结构一致的输入框组HTML
  var newInputGroup = `
    <div class="form-group">
      <label for="">DVR Address </label>
      <input type="text" class="form-control" id="txtDVRAddress${newId}" name="nmDVRAddress${newId}" runat="server" />
      <div class='minus'>
        <i class='fa fa-times' aria-hidden='true'></i>
      </div>
    </div>
  `;

  // 将新元素插入到容器中
  $('#inputContainer').append(newInputGroup);

  // 给新增的减号绑定删除事件
  $('#inputContainer .minus').last().on('click', function() {
    $(this).closest('.form-group').remove();
  });
}

内容的提问来源于stack exchange，提问作者Nadeem