jQuery属性选择器失效：Google Analytics导航链接点击追踪问题

嘿，我来帮你排查这个选择器不生效的问题！这种情况通常是几个常见原因导致的，咱们一个个来解决：

• DOM加载顺序不对，代码执行时元素还没生成
  如果你把这段JS代码放在页面<head>里，或者放在目标<a>标签之前，jQuery在执行选择器的时候根本找不到这些链接元素。解决办法是把代码包裹在$(document).ready()里，确保DOM完全加载后再绑定事件：

  $(document).ready(function() {
    jQuery("a[href*='maps.google.com']").click(function(event) {
      console.log('directions link clicked');
      if (typeof gtag !== 'undefined') {
        gtag('event', 'Click', {
          'event_category': 'Contact',
          'event_label': 'Directions',
          'event_callback': function() {
            console.log("directions tracking sent successfully");
            // 回调里跳转，确保追踪请求发送完成
            window.location.href = $(this).attr('href');
          }
        });
      }
      event.preventDefault(); // 先阻止默认跳转行为
    });
  });
  

• 链接是动态生成的（比如AJAX加载、模板渲染）
  如果这些地图链接是页面加载后通过JS动态添加的，直接用.click()绑定事件会失效——因为绑定事件的时候元素还不存在。这时候要用事件委托，把事件绑定到已经存在的父元素（或者document）上：

  $(document).ready(function() {
    jQuery(document).on('click', "a[href*='maps.google.com']", function(event) {
      console.log('directions link clicked');
      if (typeof gtag !== 'undefined') {
        gtag('event', 'Click', {
          'event_category': 'Contact',
          'event_label': 'Directions',
          'event_callback': function() {
            console.log("directions tracking sent successfully");
            window.location.href = $(this).attr('href');
          }
        });
      }
      event.preventDefault();
    });
  });
  

• href属性大小写不匹配
  如果实际链接的href里是Maps.Google.com这种混合大小写的形式，你的选择器maps.google.com就匹配不上。可以用jQuery的不区分大小写选择器（需要jQuery 1.8及以上版本），在选择器末尾加i修饰符：

  jQuery("a[href*='maps.google.com' i]").click(...)
  

• jQuery未正确加载
  先打开浏览器控制台，看看有没有$ is not defined或者jQuery is not defined的错误。如果有，说明你要么没引入jQuery，要么引入的顺序在这段代码之后——得把jQuery的<script>标签放在这段代码之前。

另外补充个小细节：默认情况下，用户点击链接会立即跳转，可能导致gtag的追踪请求还没发送完成就离开了页面。上面的代码里用event.preventDefault()先阻止跳转，然后在event_callback里执行跳转，或者加个短延迟，能确保追踪数据成功发送。

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