Mustache与JavaScript请求异常：无法获取Alert idx值致功能失效

核心问题分析 #

1. 重复ID冲突：循环渲染告警条目时，所有「알림시작」按钮都用了相同的id="alert-start"，所有ID容器都用了id="idx"。HTML要求ID全局唯一，jQuery选择器只会匹配第一个元素，导致后续按钮点击无响应，且只能获取第一个告警的ID。
2. 错误的DOM属性读取：用<div id="idx">存储ID，却调用val()方法获取值——val()仅适用于表单元素（input/select等），div元素应该用text()或html()读取内容。
3. HTML结构不合法：<tr>标签内直接嵌套<div>违反表格结构规范，<tr>的直接子元素只能是<td>或<th>，这可能导致浏览器渲染异常。

解决方案代码修改 #

1. 修正alert.mustache的循环渲染部分

将重复ID替换为数据属性，并修复表格结构：

{{#alerts}} 
<tr>
    <td>
        <!-- 把告警ID绑定到按钮的data-id属性，无需单独的ID容器 -->
        <button type="button" class="btn alert-start-btn" data-alert-id="{{id}}">알림시작</button>
    </td>
    <td>티커 : {{ticker}}</td>
    <td>가격 : {{price}}</td>
</tr>
{{/alerts}}

• 用class="alert-start-btn"代替重复ID，确保选择器能匹配所有按钮
• 用data-alert-id="{{id}}"将告警ID直接绑定到按钮，避免额外的DOM元素
• 移除无效的<div id="idx">，修复表格结构

2. 修正index.js的事件绑定与逻辑

使用事件委托绑定动态生成的按钮，并通过数据属性获取告警ID：

// 事件委托：绑定到父容器（比如表格的tbody，或者直接document），确保动态生成的按钮能触发事件
$(document).on('click', '.alert-start-btn', function() {
    // 从按钮的data属性中获取告警ID
    const alertId = $(this).data('alert-id');
    
    $.ajax({
        type: 'GET',
        url: `/alerts/${alertId}`
    }).done(function() {
        alert('알림이 시작됩니다.');
    }).fail(function(error) {
        alert('요청 실패: ' + JSON.stringify(error));
    });
});

• 移除原有的alertStart函数，简化逻辑
• 事件委托解决动态元素绑定问题
• 通过data()方法直接读取按钮上绑定的告警ID，避免DOM遍历错误

额外优化建议 #

1. 后端接口超时处理：当前Service中的Thread.sleep(1000)会阻塞请求线程，建议改用异步任务（@Async）处理WebSocket监听，避免占用Tomcat线程池。
2. WebSocket连接复用：每个告警创建新WebSocket连接可能导致资源浪费，考虑复用连接或连接池管理。
3. 前端错误提示优化：将JSON.stringify(error)改为展示更友好的错误信息，比如error.responseText或自定义错误码。

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