FontAwesome iconpicker按钮置于表单内点击触发表单提交问题求助

根因分析 #

• HTML规范中，<button>标签未明确指定type属性时，放在<form>标签内部默认类型为submit，点击会直接触发表单提交
• 你提供的代码中，绑定iconpicker的按钮未显式添加type="button"属性，是触发该问题的核心原因；如果添加后仍未生效，通常是iconpicker组件内部动态生成的交互元素未做提交拦截，或动态克隆生成的按钮未同步添加属性导致

解决方案 #

步骤1：给iconpicker绑定的按钮显式声明按钮类型 #

修改你的按钮代码，明确添加type="button"属性：

<button name="flnk_0[]" id="ipk" type="button" class="btn btn-outline-secondary" data-icon="fas fa-mouse-pointer" role="iconpicker" ></button>

步骤2：添加事件拦截阻止默认提交行为 #

如果添加属性后问题仍然存在，在iconpicker初始化代码中补充点击事件拦截，阻止默认的表单提交行为：

$("#ipk").iconpicker().on('click', function(e) {
  // 阻止按钮点击的默认提交行为
  e.preventDefault();
});

特殊场景适配（动态克隆场景） #

你当前代码中的iconpicker放在display:none的克隆模板内，如果业务中会克隆该模板生成多组表单项，需要注意两点：

• 克隆生成的新按钮也需要显式添加type="button"属性
• 每个新生成的iconpicker按钮需要单独调用iconpicker()方法初始化，不能只初始化模板中的按钮

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