jQuery on('click')在Handlebars动态生成页面中失效问题求助

嘿，我之前也碰到过一模一样的情况！这问题的核心原因很明确：你用普通方式绑定的click事件，只会作用于页面初始加载时就存在的DOM元素，而Handlebars动态生成的这些<input>元素是在页面加载完成后才被渲染到DOM里的，所以jQuery根本找不到它们来绑定事件。

下面给你几个靠谱的解决办法：

1. 使用事件委托（最推荐） #

事件委托的思路是把事件绑定到一个已经存在的父级元素（比如你的表格、外层容器，甚至document）上，然后指定要监听的目标元素选择器。这样不管后续动态生成多少元素，只要匹配选择器，事件都会生效。

举个例子，假设你的动态输入框放在一个id为result_table的表格里，代码可以这么写：

// 绑定到父级表格，监听目标元素的click事件
$('#result_table').on('click', '#temps_ajout_resultat', function() {
  // 这里写你的点击事件逻辑
  console.log('动态元素的点击事件生效啦！');
  // 比如获取输入框的值：
  const inputValue = $(this).val();
  console.log('输入值：', inputValue);
});

如果找不到合适的父级元素，也可以用document作为兜底（虽然性能稍差，但简单好用）：

$(document).on('click', '#temps_ajout_resultat', function() {
  // 你的事件处理代码
});

2. 额外检查点 #

除了事件委托，你还可以排查这几个地方：

• 确保你的jQuery代码是在DOM加载完成后执行的，比如包裹在$(document).ready()里：

  $(document).ready(function() {
    // 这里写事件绑定代码
  });
  

• 打开浏览器控制台（F12），检查Handlebars是否正确渲染了元素：看看#temps_ajout_resultat这个id是否真的出现在DOM中，有没有拼写错误
• 检查控制台有没有其他JS报错，有时候其他错误会阻止事件绑定代码执行

内容的提问来源于stack exchange，提问作者Lucky-Luke87