Javascript 单击Django站点的图标时，Jquery/Ajax功能不起作用

我有一个使用

jquery

的

ajax

请求脚本，该脚本用于在我的

django

网站上对帖子进行投票。当我点击带有单词“upvote”的部件时，它可以正常工作，但当我点击我的upvote图标时，它不会注册并在控制台中显示

404 not found

。我怀疑这与文档和无法对图标进行操作有关。有人能帮我确定问题，或者知道解决方法吗？下面是我的代码和错误图片，谢谢

template.html

<form action="{% url 'main:upvote-post' %}" method="POST">
  {% csrf_token %}
  <!-- check to see if user has already upvoted post.-->
  <span>
    {% if post.upvoted %}

    <button type="submit" class="btn btn-success btn-sm upvote-btn card-link" id="{{post.id}}" name="post_id" value="{{post.id}}">
      <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-shift" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path
          fill-rule="evenodd"
          d="M7.27 2.047a1 1 0 0 1 1.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H11.5v3a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-3H1.654C.78 10.5.326 9.455.924 8.816L7.27 2.047zM14.346 9.5L8 2.731 1.654 9.5H4.5a1 1 0 0 1 1 1v3h5v-3a1 1 0 0 1 1-1h2.846z"
        />
      </svg>

      <span id="total_upvotes_for_{{post.id}}">
        <!-- insert post id into the element here so it could be called in the script -->
        {{ post.total_upvotes}}
      </span>

      Upvotes
    </button>
    {% else %}
  </span>
</form>

{%csrf_令牌%}
{%if post.upvoted%}
{{投票总数}
向上投票
{%else%}

script.js

<script>
  $(document).on("click", ".upvote-btn", function (e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: '{% url "main:upvote-post" %}',
      data: {
        postid: e.target.value,
        csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken]").val(),
        action: "post",
      },
      success: function (json) {
        document.getElementById("total_upvotes_for_" + e.target.value).innerHTML = json["result"];
        $("#" + e.target.value).toggleClass("btn-success btn-outline-success"); // toggle upvote button using id
        console.log(e.target.value);
      },
      error: function (xhr, errmsg, err) {
        console.log(err);
      },
    });
  });
</script>

$（文件）。在（“点击”上，“.upvote btn”，功能（e）{
e、 预防默认值（）；
$.ajax({
类型：“POST”，
url:“{%url”main:upvote post“%}”，
数据：{
posted:e.target.value，
csrfmiddlewaretoken:$（“输入[name=csrfmiddlewaretoken]”）。val（），
行动：“张贴”，
},
成功：函数（json）{
document.getElementById（“total_upvoces_for_”+e.target.value）.innerHTML=json[“result”]；
$（“#”+e.target.value）.toggleClass（“btn成功btn大纲成功”）；//使用id切换向上投票按钮
console.log（如target.value）；
},
错误：函数（xhr、errmsg、err）{
控制台日志（err）；
},
});
});

---

要将单击事件委托给“.upvote btn”，您可以参考父窗体：

$(document).on("submit", "form:has(.upvote-btn)", function (e) {

片段：

$（文档）。在（“提交”，“表格：has（.upvote btn）”，函数（e）{
e、 预防默认值（）；
log（'点击按钮：ok'）；
返回；
var addr=此操作；
$.ajax({
键入：“POST”，
网址：addr，
数据：{
posted:e.target.value，
csrfmiddlewaretoken:$（'input[name=csrfmiddlewaretoken]'）。val（），
行动:"邮政"
},
成功：函数（json）{
document.getElementById（“total_upvoces_for_u”+e.target.value）.innerHTML=json['result']
$（“#”+e.target.value）.toggleClass（'btn-success btn OUTLE success'）；//使用id切换向上投票按钮
console.log（例如target.value）
},
错误：函数（xhr、errmsg、err）{
console.log（错误）
}
});
})

{%csrf_令牌%}
{%if post.upvoted%}
{{投票总数}
向上投票
{%else%}

通过引用父项尝试解决方案，现在整个按钮的结果是

404

404表示：未找到资源。请检查表单操作的值。对吗？我更新了代码段。@cdub能否添加“{%url”main:upvote post“%”的值？url应该是什么？