如何为有值的HTML重复输入框按钮设置自动点击功能

需要实现：当输入框填入内容时，自动点击对应行的加号按钮，新增一行输入框。现有代码未达到预期效果，相关代码如下：

现有HTML代码 #

<table id="rf_id" >
  <div class="form-group row col-sm-5" id="rf">
    <tbody id="rf123">
      <tr>
        <td> </td>
        <td> <input type="text" placeholder="Enter product RFID code"
                id="rfid_0" class="form-control" name="rfid[]" onclick="myFunction();" autofocus></td>

        <td> <i class="fa fa-trash-o delete_rfid"
                style="font-size:25px;color:red"
                onclick="removeOptionRow('0');"></i>
          <i class="fa fa-plus-circle tr_rfid_add" id="tr_rfid_add"
                style="font-size:25px;color:green" aria-hidden="true"
                onclick="addFilterOptionRow();"></i>
        </td>
      </tr>
    </tbody>
  </div>
</table>

现有JavaScript代码 #

$(document).ready(function(){
 $('#tr_rfid_add').click(function(){
        var as = $('#demo').val();
    var cd = $('#rfid_' + as + '').val();
  alert(cd);  // showing input value
    });
  // set time out 5 sec
     setTimeout(function(){
        $('#tr_rfid_add').trigger('click');
    }, 2000);
});

修正方案 #

原代码的问题在于用固定延迟触发点击，而非监听输入框的内容变化，且未处理动态新增的输入框。以下是修正后的代码：

$(document).ready(function() {
  // 事件委托监听所有rfid输入框的输入事件（包括动态新增的）
  $('#rf123').on('input', 'input[name="rfid[]"]', function() {
    const $input = $(this);
    // 仅当输入框内容从空变为非空时触发，避免重复点击
    if ($input.val().trim() !== '' && !$input.data('hasTriggered')) {
      $input.data('hasTriggered', true);
      // 找到当前行的加号按钮并触发点击
      $input.closest('tr').find('.tr_rfid_add').trigger('click');
    }
  });

  // 监听加号按钮点击（事件委托支持动态新增的按钮）
  $('#rf123').on('click', '.tr_rfid_add', function() {
    const $row = $(this).closest('tr');
    const rowIndex = $row.index();
    const inputVal = $('#rfid_' + rowIndex).val();
    console.log(inputVal); // 可替换为你的业务逻辑

    // 注意：确保`addFilterOptionRow()`生成新行时，输入框id按顺序递增（如rfid_1、rfid_2）
    // 新行的加号按钮仅保留`.tr_rfid_add`类，不要重复使用id
  });
});

关键修改说明 #

• 事件委托：绑定事件到静态父元素#rf123，确保动态新增的输入框和按钮也能触发事件
• 输入触发逻辑：监听输入框的input事件，仅在内容非空且未触发过时执行点击，避免重复新增
• 去重复id：原代码加号按钮用了固定idtr_rfid_add，新增行会导致id冲突，改为仅用类.tr_rfid_add绑定事件

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