單擊 Django 站點的圖標時，Jquery/Ajax 功能不起作用

Question

我有一個使用jquery的ajax請求腳本，該腳本用於在我的django站點上對帖子進行django 。 當我點擊帶有“upvote”這個詞的部分時它工作正常，但是當我點擊我的upvote圖標時，它沒有注冊並顯示在控制台中404 not found 。 我懷疑這與文檔有關，並且無法對圖標進行操作。 任何人都可以幫助我確定問題或知道解決方法嗎？ 下面是我的代碼和錯誤圖片，謝謝！

模板.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>

腳本.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>

Answer 1

而不是將點擊事件委托給“.upvote-btn”，您可以參考父表單：

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

片段：

 $(document).on("submit", "form:has(.upvote-btn)", function (e) { e.preventDefault(); console.log('button clicked: ok'); return; var addr = this.action; $.ajax({ type: 'POST', url: addr, 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <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="evenoddd="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>