Question

我想在文章上做个喜欢，在<div>上使用onclick事件，其他函数处理请求，这里是代码：

<div class="act">
    <respect class="respect">
      {% if new.voted_new(new.id) %}
        <div class="button_like" data-new="{{new.id}}" onclick="Unlike();">
            <div class="norespect" style="background: #2fcc71; border-color: #2fcc71;"></div>
        </div>
      {% else %}
        <div class="button_like" data-new="{{new.id}}"  onclick="Like();">
            <div class="norespect" style=""></div>
        </div>
      {% endif %}
        <p class='respectCount{{new.id}}'>{{new.respects}}</p>
    </respect>
    <views>
      <p class="views_count"><i class="fa fa-eye"></i> {{new.views}}</p>
    </views>
</div>

以下是JQuery代码：

function Like(){
    $('.button_like, .respectCount').on('click', function(e){
      e.preventDefault();
      var new_id = $(this).attr('data-new');
      var p_result = $(this).attr('data-result');
      $.ajax({
        url: "/client/cat-{{g.current_directory}}/news/like/",
        type: 'post',
        cache: false,
        data: {
          new_id: new_id
        },
        success: function(data){
          $('p.respectCount'+new_id).text(data.result);
          console.log(data.result);
          $(this).fadeOut(500).fadeIn(500);
        },
        error: function(data){
          return false;
        }
      }).done(function(data){
        if (data){
          $('p.respectCount'+new_id).text(data.result);
          console.log(data.result);
          $(this).fadeOut(500).fadeIn(500);
        } else {
          return false;
        }
    });
});
}

问题是我必须点击两次才能做出类似的事情，同样在控制台内部我有两个ajax请求。

请，任何帮助??

Answer 1

根据您的HTML，您添加了内联点击处理程序

<div class="button_like" data-new="{{new.id}}"  onclick="Like();">
</div>

在事件处理程序中，您附加了不显眼的事件处理程序。因此，只要单击button，就会附加一个新的处理程序。

删除，丑陋的内嵌点击处理程序，只使用不显眼的事件处理程序

$(function () {
    $('.button_like, .respectCount').on('click', function (e) {
        //Your code
    });
});

Answer 2

函数Like内的代码应位于其自己的document.ready(function{...})之外。 Like应该发送自己的ajax请求。同样可能是Unlike，你没有显示代码。

为什么同时获得两个ajax呼叫？

2 个答案: