Django模板渲染HTML链接失效问题求助

我之前也碰到过类似的情况，来帮你分析下问题出在哪，以及怎么修复：

问题1：JavaScript语法错误导致onclick失效 #

你第一个按钮的onclick事件里，location.href的URL没有用引号包裹，这会导致浏览器解析JavaScript时出错，事件根本无法执行：

// 错误写法
onclick='location.href=https://mywebsite.com/contact;'
// 正确写法（需给URL加单/双引号）
onclick='location.href="https://mywebsite.com/contact";'

问题2：嵌套按钮触发表单默认提交 #

第二个按钮是放在<a>标签内部的<button>，但HTML里按钮的默认type是submit，点击时会触发父级<form>的提交动作，所以页面会刷新而不是跳转到目标链接。

解决这个问题有两种常用方式：

• 给按钮添加type="button"，阻止它的默认提交行为；
• 直接用<a>标签样式模拟按钮，去掉嵌套的<button>（更符合HTML规范）。

修正后的完整代码示例 #

把你的con_stat变量改成下面这样，就能正常工作了：

con_stat = """<div id='overlay_demo' style='display:block'>
<div id='text-demo'>
<div class='login-box-body'>
<p class='login-box-msg'><strong><font color='red'>MY TITLE HERE</font></strong></p>
<br>My text here<br><br>
<div>
<form>
<!-- 修复onclick的引号问题，同时添加type="button"避免表单提交 -->
<button onclick='location.href="https://mywebsite.com/contact";' class='btn btn-block btn-danger btn-lg' type="button">REPORT THE PROBLEM</button>
<br>
<!-- 方案1：给嵌套按钮添加type="button" -->
<a href='/register/retry'>
<button class='btn btn-block btn-success btn-lg' type="button">RETRY THE REGISTRATION PROCESS</button>
</a>
<!-- 方案2：用a标签直接模拟按钮（更推荐）
<a href='/register/retry' class='btn btn-block btn-success btn-lg'>RETRY THE REGISTRATION PROCESS</a>
-->
</form>
</div>
</div>
</div>
</div>"""

额外建议 #

尽量不要在视图里直接拼接HTML字符串，不仅容易出现这类语法错误，后期维护也很麻烦。你可以把这段HTML写成Django的模板片段（比如status_overlay.html），然后在主模板里用{% include %}引入，把需要动态替换的内容（比如标题、文本）用模板变量传递，这样更符合Django的最佳实践。

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