Grails中为f:all标签渲染的字段添加自定义JavaScript点击事件方案咨询

方案1：无需修改表单渲染逻辑，修复事件绑定问题 #

你的问题首先存在JS代码逻辑错误，其次可以用更稳妥的绑定方式避免元素加载时序问题：

• 首先修正原JS的错误写法：你当前给onclick赋值的逻辑是立即执行validate函数，而不是把函数作为回调绑定给点击事件，同时this指向也不符合预期。推荐用addEventListener替代直接赋值onclick，避免覆盖其他已绑定的事件。
• 推荐使用事件委托方案，不需要等待目标元素加载完成，直接绑定到表单父级元素即可，从根源上避免时序问题：

document.addEventListener('DOMContentLoaded', function() {
  // 绑定到表单父级容器，也可直接绑定到document
  document.querySelector('fieldset.form').addEventListener('click', function(e) {
    const targetIds = ['export', 'import_', 'transit'];
    if(targetIds.includes(e.target.id)) {
      validate();
    }
  })
})

如果还是想用原有init绑定逻辑，修正后的写法如下：

function init() {
  const exportElement = document.getElementById('export');
  const importElement = document.getElementById('import_');
  const transitElement = document.getElementById('transit');
  // 先判断元素存在再绑定，避免控制台报错
  if(exportElement) exportElement.addEventListener('click', validate);
  if(importElement) importElement.addEventListener('click', validate);
  if(transitElement) transitElement.addEventListener('click', validate);
}

同时建议把init()的触发从body的onload改成DOMContentLoaded事件，这个事件在DOM完全解析完成后就触发，比body onload更早也更稳定。

方案2：自定义指定字段的渲染，无需全部手动写所有字段 #

不需要完全手动渲染所有字段，你可以用f:all的except属性排除需要自定义的3个字段，然后在你需要的位置手动用f:field渲染这三个字段，同时加上自定义的onclick属性即可，示例代码如下：

<g:form resource="${this.agreement}" method="POST">
  <fieldset class="form">
    <!-- 按你需要的顺序插入自定义字段，添加onclick属性 -->
    <f:field bean="agreement" property="export" onclick="validate()"/>
    <f:field bean="agreement" property="import_" onclick="validate()"/>
    <!-- 渲染除了export、import_、transit之外的所有字段 -->
    <f:all bean="agreement" associationValues="${associationValues}" except="export,import_,transit"/>
    <f:field bean="agreement" property="transit" onclick="validate()"/>
  </fieldset>
  <fieldset class="buttons">
    <g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
  </fieldset>
</g:form>

这种方式既保留了f:all自动渲染大部分字段的便利性，又可以灵活调整指定字段的属性和顺序，是最符合你需求的实现方式。

内容的提问来源于stack exchange，提问作者Fish-Guts