如何将Django模板中的内联JavaScript代码转换为Alpine.js实现

你只需要修改模板的两处代码，完全删除原有内联JavaScript块即可，所有功能用Alpine.js原生指令实现，无需额外依赖：

1. 修改邮箱列表表单标签 #

给原有<form>标签添加Alpine初始化指令，实现页面加载时移除form-group的row类逻辑：

<form 
  action="{% url 'account_email' %}" 
  class="email_list" 
  method="post"
  x-data
  x-init="$el.querySelectorAll('.form-group').forEach(el => el.classList.remove('row'))"
>

2. 修改删除按钮 #

给删除按钮添加点击事件，实现二次确认逻辑：

<button 
  class="primaryAction btn btn-primary" 
  type="submit" 
  name="action_remove"
  @click.prevent="confirm('你确定要删除选中的邮箱地址吗？') && $el.closest('form').submit()"
>Remove</button>

如果你的站点是英文语境，把@click里的确认提示文字替换回原有的Do you really want to remove the selected e-mail address?即可。

3. 清理冗余代码 #

直接删除模板底部整个inline_javascript代码块即可，原有逻辑已经完全被Alpine指令替代。

实现说明 #

• 所有逻辑和原内联JS完全一致：页面加载后自动移除所有form-group元素的row类，点击删除按钮先弹出确认框，用户确认后才提交删除请求，取消则无操作
• 不需要依赖jQuery，所有操作都用原生JS实现，性能更好
• 完全没有内联JS代码，符合需求

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