如何在 "add new" 事件后仅将更改应用于新字段？

Question

我有一段代码可以自动用特定数字填充新字段。但是，这也会自动更新用户编辑之前的值。我需要调整此代码，以便只有新添加的行包含所需的预填充数字，而无需编辑任何其他行。

document.addEventListener("DOMContentLoaded", function(event) {
  copyValueToRepeat();

  var sourceField = document.getElementById( 'field_jimvh' );
  sourceField.addEventListener( "change", function(event) {
  copyValueToRepeat();
  });

});

jQuery(document).on('frmAfterAddRow', copyValueToRepeat );

function copyValueToRepeat(){
  var sourceField = document.getElementById( 'field_jimvh' );
  var repeatFields = document.querySelectorAll( '.frm_field_216_container input');

 for ( var i = 0, len=repeatFields.length; i<len; i++ ) {
        repeatFields[i].value = sourceField.value;
    }   

}

我认为问题出在最后的 for 循环中，但我不知道如何准确调整它。我认为这个问题是微不足道的，但我的编程技能是基本的。

感谢您的帮助。

Answer 1

这一行document.querySelectorAll( '.frm_field_216_container input') 选择所有字段。您可能希望在 'new_input_field' 等新字段中添加额外的 css class，然后将查询选择器修改为：document.querySelectorAll( '.frm_field_216_container .new_input_field')

如何在 "add new" 事件后仅将更改应用于新字段？

How to apply changes only to new fields after "add new" event?

javascript

wordpress

input

jquery-selectors