表单内嵌套href="#"的a链接引发页面刷新与表单冲突问题求助

可行解决方案 #

• 方案1：在a标签的点击事件回调中阻止默认跳转行为
  页面刷新的核心原因是href="#"的默认点击行为会触发锚点跳转，未阻止默认行为时就会出现刷新问题。在你绑定的点击事件开头添加阻止默认行为的代码即可：
  若使用jQuery绑定事件：

  $('#locateMe').click(function(e) {
    e.preventDefault(); // 新增这行阻止默认跳转
    // 保留原有触发AJAX请求的逻辑
  });
  

  若使用原生JS绑定事件：

  document.getElementById('locateMe').addEventListener('click', function(e) {
    e.preventDefault(); // 新增这行阻止默认跳转
    // 保留原有触发AJAX请求的逻辑
  });
  

• 方案2：修改a标签的href属性
  把href="#"替换为href="javascript:void(0)"，直接从HTML层面取消默认跳转行为，修改后的a标签代码如下：

  <a href="javascript:void(0)" class="locate_me" id="locateMe">Update My Location</a>
  

• 方案3：替换a标签为无默认跳转行为的元素
  因为你只需要点击触发AJAX，不需要a标签的跳转特性，直接换成span、div等元素即可，还可以避免后续的链接相关冲突：

  <span class="locate_me" id="locateMe" style="cursor:pointer;">Update My Location</span>
  

额外注意事项 #

你当前的表单提交按钮放在了</form>结束标签外部，默认情况下这个submit按钮无法关联到对应表单，会导致表单提交功能异常。如果需要保留这个结构，可以给表单添加id属性，再给button添加form属性关联即可：

<form id="profileSettingForm" method="POST" action="/profile/save_profile_setting">
  <a href="#" class="locate_me" id="locateMe">Update My Location</a>
</form>
<button form="profileSettingForm" class="btn" type="submit" name="action" >
  <span><?php echo __( 'Save' );?></span>
</button>

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