Haml视图中锚点标签阻止默认行为后点击事件首次加载无效

核心原因分析 #

首次加载页面时（尤其常见于Rails通过Turbo/Turbolinks动态加载的场景），锚点标签的默认行为拦截逻辑与事件冒泡存在冲突，加上javascript:void(0)这类href值在动态加载场景下可能干扰事件委托触发，导致点击图片时无法正常触发绑定在锚点上的事件。而刷新页面属于硬加载，浏览器重新解析所有元素与事件绑定，因此功能恢复正常。

解决方案 #

方案1：改用语义化按钮（推荐） #

既然是按钮操作而非跳转链接，直接使用<button>替代<a>标签，从根源避免锚点默认行为问题：

Haml代码修改

%button#generic-button.button{ 'data-generic-id' => generic-id }
  = image_tag('https://www.example.com/test/generic-button.svg', id: 'generic-image')

JS事件代码调整

无需event.preventDefault()，因为按钮默认无跳转行为：

$(document).on('click', '#generic-button.button', function() {
  var genericId = $(this).data('generic-id');

  $.ajax({
    url: '/generic-action',
    method: 'POST',
    headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
    data: { generic_id: genericId },
    success: function(response) {
      if (response.success) {
        // 处理成功逻辑
      }
    },
    error: function() {
      // 处理错误逻辑
    }
  });
});

方案2：修复锚点标签的事件与默认行为 #

如果必须保留<a>标签，按以下步骤调整：

Haml代码修改

• 将href改为#，避免javascript:void(0)的潜在问题
• 若使用Rails Turbo，添加data-turbo="false"阻止Turbo拦截链接点击

%a#generic-button.button{ 'data-generic-id' => generic-id, :href => '#', 'data-turbo' => 'false' }
  = image_tag('https://www.example.com/test/generic-button.svg', id: 'generic-image')

JS事件代码强化

确保阻止所有默认行为，并明确捕获图片的冒泡事件：

$(document).on('click', '#generic-button.button, #generic-button.button img', function(event) {
  event.preventDefault();
  event.stopPropagation();
  
  // 确保获取到锚点元素的data属性
  var $target = $(event.target).is('img') ? $(event.target).closest('#generic-button.button') : $(this);
  var genericId = $target.data('generic-id');

  $.ajax({
    url: '/generic-action',
    method: 'POST',
    headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
    data: { generic_id: genericId },
    success: function(response) {
      if (response.success) {
        // 处理成功逻辑
      }
    },
    error: function() {
      // 处理错误逻辑
    }
  });
});

验证要点 #

1. 首次加载页面后，打开浏览器控制台，确认无JS报错
2. 点击图片时，可在事件函数开头添加console.log('事件触发')，检查控制台是否输出日志验证触发情况
3. 通过元素检查器确认data-generic-id属性已正确渲染

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