如何在Embedded Elixir中为按钮添加功能？

你正在使用的是Elixir的EEx模板（常见于Phoenix框架），这类模板本质是生成标准HTML，所以绑定点击事件的逻辑和普通HTML一致，只是需要结合模板语法处理变量，以下是几种实用实现方式：

1. 直接写内联onclick事件 #

和普通HTML一样，直接在按钮标签里定义onclick属性，调用全局JS函数，还能结合模板变量传递参数：

<%= for country <- @countries do %>
  <div>
    <div>A list of countries you have visited</div>
    <a href="/countries/<%= String.downcase(country) %>"><%= country %></a>
    <button onclick="handleCountryClick('<%= Phoenix.HTML.html_escape(country) %>')"> Click This </button>
  </div>
<% end %>

然后在页面的<script>标签里定义全局函数：

function handleCountryClick(country) {
  // 这里编写你的逻辑，比如弹窗或发送请求
  alert(`你点击了${country}的按钮`);
}

注：用Phoenix.HTML.html_escape/1转义变量，避免特殊字符导致的语法错误或XSS风险。

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

更符合现代JS实践的方式是事件委托，给父元素绑定统一事件，通过目标元素标识来处理：
先修改模板，给按钮加类名和自定义属性：

<%= for country <- @countries do %>
  <div class="country-item">
    <div>A list of countries you have visited</div>
    <a href="/countries/<%= String.downcase(country) %>"><%= country %></a>
    <button class="country-btn" data-country="<%= country %>"> Click This </button>
  </div>
<% end %>

然后在JS中绑定事件：

document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('country-btn')) {
      const country = e.target.dataset.country;
      // 处理点击逻辑
      console.log(`点击了国家：${country}`);
    }
  });
});

这种方法无需给每个按钮单独绑定事件，动态渲染列表时更高效，也避免了代码耦合。

3. 结合Phoenix LiveView（若使用Phoenix框架） #

如果是Phoenix LiveView项目，可以直接绑定服务器端事件，无需编写前端JS：

<%= for country <- @countries do %>
  <div>
    <div>A list of countries you have visited</div>
    <a href="/countries/<%= String.downcase(country) %>"><%= country %></a>
    <%= button "Click This", phx_click: "country_click", phx_value_country: country %>
  </div>
<% end %>

然后在LiveView模块中处理事件：

def handle_event("country_click", %{"country" => country}, socket) do
  # 这里编写服务器端逻辑，比如更新状态、操作数据库等
  {:noreply, assign(socket, :selected_country, country)}
end

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