如何实现点击触发事件？点击project元素无alert弹窗问题排查

看起来你的点击事件没触发大概率是这几个原因导致的，咱们一步步排查修复：

1. 确保DOM加载完成后再绑定事件 #

你目前只有克隆表格的代码放在了jQuery(document).ready()回调里，而滚动逻辑和点击事件绑定都在外面。如果DOM还没完全加载完毕，.project元素可能还未渲染到页面中，直接绑定事件自然会失效。把所有jQuery相关代码都放进ready回调里：

jQuery(document).ready(function() {
  // 克隆表格并添加类名
  jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
  // 滚动到指定日期位置
  $('.table-wrap').scrollLeft($('[data-date="2018-04-01"]').offset().left - 82);
  // 绑定.project点击事件
  $( ".project" ).on( "click", function() { 
    alert("clicked"); 
  });
});

2. 处理动态生成的.project元素 #

你用clone(true)克隆表格时，true参数会复制原元素的事件，但如果点击事件是在克隆操作之后才绑定的，那克隆出来的表格里的.project元素就不会带上这个点击事件。这种场景下最好用事件委托，把事件绑定到一个始终存在的父元素上，不管元素是初始就有还是动态生成的，都能触发：

jQuery(document).ready(function() {
  jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
  $('.table-wrap').scrollLeft($('[data-date="2018-04-01"]').offset().left - 82);
  
  // 用事件委托绑定，推荐用更具体的父容器代替document（比如.table-scroll）
  $('.table-scroll').on("click", ".project", function() { 
    alert("clicked"); 
  });
});

3. 排查CSS是否阻止点击 #

偶尔会出现元素被其他层覆盖（比如overflow:hidden的容器、绝对定位的遮罩元素），或者pointer-events被设置为none的情况，导致点击无法触发。你可以打开浏览器开发者工具，选中.project元素，检查它的点击区域是否正常，以及有没有上层元素遮挡。

先试试前两个方案，应该能解决你的问题～

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