使用Ajax将点击计数发送到django视图

Question

我正在尝试将每次点击的项目点击ID发送到Django视图，以便我可以针对每个项目更新计数。 我通过使用ajax和javscript实现了这一点，但是当id向Django视图发送id时存在一些问题。

实际发生了什么

当我单击任何项​​目（1）（第一次）时，没有任何反应

但是当我单击任何项​​目（假设2）时，它会发送1和2

再次单击项目3-发送1,2,3

我不知道为什么会这样。

它应该只发送一个被单击的项目

我的代码是-

{% for solution in item %}
        <ul>

            <li >{{solution.solution_name}}
                <a href="#"><i  value="{{solution.id}}" class="fa fa-download down" aria-hidden="true"  onclick="count(document.getElementById('fname_{{solution.id}}').value)">
               <input type="text" id="fname_{{solution.id}}" value="{{solution.id}}"></i></a>
            </li>
        </ul>
        {% endfor %}

我的阿贾克斯部分-

    <script>
        function count(a) {
    var id = parseInt(a);
    $('.down').click(function(e){
        console.log("clicked item id is")
        e.preventDefault();
        console.log(id);


    $.ajax({
        type:'POST',
        url: '/solutions/count',
        data: {
          'id': id
        },
        dataType: 'json',
        success: function (data) {
          if (data.is_taken) {
            alert("A user with this username already exists.");
          }
        }
      });
    })
  }

    </script>

Answer 1

您在单击时调用函数，并且在该函数中有另一个单击事件，这会给您带来麻烦，因此您只需要一个单击事件

采用：

<script>
$(function(){
$('.down').click(function(e){

        e.preventDefault();
        var id = $(this).attr('value');    

    $.ajax({
        type:'POST',
        url: '/solutions/count',
        data: {
          'id': id
        },
        dataType: 'json',
        success: function (data) {
          if (data.is_taken) {
            alert("A user with this username already exists.");
          }
        }
      });
    })

});

从HTML中删除onclick属性