Mustache JS模板渲染异常：添加按钮不生效问题求助

问题根源 #

你的代码存在两个关键错误，直接导致按钮无法正常渲染：

1. 模板字符串拼接时，第三行末尾多了个分号，打断了字符串的连续拼接，按钮部分代码未被纳入模板内容
2. Mustache调用时首字母小写，库暴露的全局对象是大写开头的Mustache，小写调用会报错

修复后的完整代码 #

<!-- jquery linking -->
<script src="../jquery-tut/node_modules/jquery.js"></script>

<!-- mustache js linking from cdn -->
<script src="https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js"></script>

<script>
var orderTemplate = "" +
    "<li>" +
    "<p><strong>Name:</strong> {{name}}</p>" + 
    "<p><strong>Drink:</strong> {{drink}}</p>" +  <!-- 移除此处多余的分号 -->
    "<button data-id='{{id}}' class='remove'>X</button>" +
    "</li>";

function addOrder(orders){
    let rendered = Mustache.render(orderTemplate, orders);  <!-- 首字母改为大写M -->
    $orders.append(rendered);
};
</script>

额外注意事项 #

• 确保$orders是已正确获取的DOM元素，比如提前执行var $orders = $('#orders');（假设页面中有id为orders的容器）
• 动态渲染的按钮需要用事件委托绑定点击事件，避免失效：

  $(document).on('click', '.remove', function() {
      const targetId = $(this).data('id');
      // 此处编写DELETE请求相关逻辑
  });
  

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