为什么我的jQuery点击事件仅在第二次点击时才会触发？

原因1：事件绑定未适配动态元素 #

直接使用.click()绑定事件仅对页面初始化时已存在的.block-swatch元素生效，如果该类元素是页面加载完成后动态渲染生成的，初始绑定的事件不会生效，触发逻辑会出现延迟。

修复方案：改用事件委托绑定 #

将事件绑定到页面永久存在的上层静态容器（如document）上，所有匹配选择器的子元素的点击事件都会被捕获：

$(document).ready(function(){ 
  $(document).on("click", ".block-swatch", function(){
    $("#refresh-feefo").load(window.location.href + " #refresh-feefo" );
  }); 
});

原因2：load方法导致id重复嵌套 #

现有写法会触发id嵌套问题：load方法拉取页面内容后，会把匹配到的#refresh-feefo元素完整插入到原有#refresh-feefo内部，第一次点击后出现两层同id元素，jQuery选择器无法正常识别，视觉上表现为第一次点击无响应。

修复方案：调整选择器仅拉取内部内容 #

修改load的匹配规则，仅拉取#refresh-feefo的子元素，避免外层标签重复嵌套：

$(document).ready(function(){ 
  $(".block-swatch").click(function(){
    $("#refresh-feefo").load(window.location.href + " #refresh-feefo > *" );
  }); 
});

原因3：请求缓存导致更新未生效 #

浏览器会对相同URL的GET请求启用缓存，第一次点击拉取的是旧缓存内容，看起来未触发更新，第二次点击时缓存过期才拉取到新内容。

修复方案：添加时间戳破除缓存 #

在请求URL后添加随机时间戳参数，保证每次请求URL唯一，不走缓存：

$(document).ready(function(){ 
  $(".block-swatch").click(function(){
    $("#refresh-feefo").load(window.location.href + "?t=" + new Date().getTime() + " #refresh-feefo > *" );
  }); 
});

最终整合修复代码 #

同时覆盖以上所有问题的修复代码如下：

$(document).ready(function(){ 
  $(document).on("click", ".block-swatch", function(){
    $("#refresh-feefo").load(window.location.href + "?t=" + new Date().getTime() + " #refresh-feefo > *" );
  }); 
});

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