javascript在codepen中工作，但不适用于在我的plotly-dash应用程序中创建的动态对象

Question

以下javascript在codepen中进行了测试，但是在我的网页上不起作用时。该函数应该冻结表的第一列，当我向左滚动表时，标题保持静态。在下面的评论中进行了一些讨论之后，可能是由于html表是动态创建的，我正在寻求帮助以转换下面的js来处理这种情况。

$(document).ready(function() {
  $('.main-table tbody').scroll(function(e) {
    $('.main-table thead').css("left", -$(".main-table tbody").scrollLeft());
    $('.main-table thead tr th:nth-child(1)').css("left", $(".main-table tbody").scrollLeft()-2);
    $('.main-table tbody tr td:nth-child(1)').css("left", $(".main-table tbody").scrollLeft()-2);
  });
});

一些尝试使其适用于动态创建的表，但仍然无法正常工作。有人可以帮忙指出我在这里做错了什么吗？

$(document).on('scroll', '.main-table tbody', function(){
    $('thead').css("left", -$("tbody").scrollLeft());
    $('thead tr th:first-child').css("left", $("tbody").scrollLeft()-2);
    $('tbody tr td:first-child').css("left", $("tbody").scrollLeft()-2);
});