如何在tpl文件中执行指定JavaScript关闭函数？

先看你代码里的核心问题：

• 按钮的id写了.sb-close-btn，这是错误写法——ID不能包含.，而且你的JS是通过类选择器.sb-close-btn监听点击事件的，不是ID选择器。
• 按钮代码里还有多余的</span>标签，会导致HTML结构错误，必须删掉。

修正按钮HTML代码 #

把你的按钮代码改成如下形式：

<button type="button" class="btn btn-primary sb-close-btn">Verder winkelen</button>

这里直接给按钮添加sb-close-btn类，和JS里的监听选择器对应，同时去掉了错误的ID和多余的闭合标签。

确保JS代码正确执行 #

你的JS事件委托写法本身没问题，但要满足两个前提：

• 页面必须已加载jQuery库，比如在页面底部引入：

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  

  （如果项目里已经引入过jQuery，就不用重复添加）
• 把这段JS代码放在页面底部，或者包裹在$(document).ready()里，确保DOM加载完成后再绑定事件：

  $(document).ready(function() {
      $(document).on('click', '.sb-overlay, .sb-close-btn', function() {
          $('.sb-overlay').fadeOut('500');
          $('html').removeClass('sb-open');
          $('#scrolltopbtn').show();
      });
  });
  

这样修改后，点击按钮就能触发对应的关闭逻辑了。

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