循环渲染JSON数据时，如何让每个按钮都可点击？

哥们，这个问题我太熟了！核心原因是HTML里的ID必须是唯一标识——你循环渲染10个按钮都用id="clickable"，浏览器只会识别第一个匹配的元素，所以jQuery用$("#clickable")绑定事件时，自然只有第一个按钮能触发响应。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案1：用类代替ID + 自定义data属性（最推荐） #

把按钮的id改成class，同时给每个按钮添加data-*属性存储对应电影的标识（比如ID），这样既能批量绑定事件，又能区分每个按钮对应的电影数据。

修改后的HTML（循环渲染部分） #

<!-- 假设你用模板引擎循环，这里用{{movie.id}}代表循环里的电影ID -->
<button class="clickable" data-movie-id="{{movie.id}}">查看电影详情</button>

对应的jQuery代码 #

// 给所有带clickable类的按钮绑定点击事件
$(".clickable").on("click", function() {
  // 获取当前点击按钮对应的电影ID
  const targetMovieId = $(this).data("movie-id");
  // 这里执行你需要的操作，比如展示对应ID的电影数据
  console.log("触发操作的电影ID：", targetMovieId);
  $("#id").text("当前选中电影ID：" + targetMovieId); // 示例：更新视图展示
});

这个方案的优势是代码简洁规范，每个按钮能精准关联自己的电影数据，后期维护也方便。

方案2：事件委托（适合动态渲染场景） #

如果你的按钮是动态生成的（比如分页加载、异步新增电影），直接给类绑定事件可能会失效，这时候用事件委托更稳妥——把事件绑定到按钮的父容器上，通过事件冒泡来触发子元素的事件。

示例代码 #

假设所有按钮都放在一个id="movie-list-container"的容器里：

// 给父容器绑定事件，监听子元素.clickable的点击
$("#movie-list-container").on("click", ".clickable", function() {
  const targetMovieId = $(this).data("movie-id");
  // 执行你的操作逻辑
  console.log("动态按钮触发，电影ID：", targetMovieId);
});

事件委托的好处是：不管什么时候新增按钮，只要它在指定的父容器里，就能自动触发事件，不用重新绑定。

方案3：给ID添加唯一后缀（不推荐，但应急可用） #

如果非要保留ID的方式，可以给每个按钮的ID加唯一后缀（比如电影ID），再通过属性选择器绑定事件。但这种方式代码冗余，不如前两种方案优雅。

修改后的HTML #

<button id="clickable-{{movie.id}}">查看电影详情</button>

对应的jQuery代码 #

// 匹配所有ID以clickable-开头的按钮
$("[id^='clickable-']").on("click", function() {
  // 从ID中拆分出电影ID
  const targetMovieId = $(this).attr("id").split("-")[1];
  // 执行操作
  console.log("触发操作的电影ID：", targetMovieId);
});

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