为什么同时收到两个 ajax 调用?

马克马尼

我想在文章上点赞,我<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 请求。

请问有什么帮助吗??

萨帕尔

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

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

在事件处理程序中,您附加了不显眼的事件处理程序。因此,无论何时button单击,都会附加一个新的处理程序。

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery Ajax调用,为什么网络活动中列出了两个请求?

来自分类Dev

同时进行2个ajax调用,并在两个都完成时回叫?

来自分类Dev

当两个单独的Ajax调用完成时,调用函数的好方法是什么?

来自分类Dev

为什么Python会同时调用这两个函数?

来自分类Dev

在表单提交时调用两个Ajax函数

来自分类Dev

无法按顺序触发两个 jQuery ajax 调用

来自分类Dev

两个不同的div中的两个ajax调用

来自分类Dev

为什么ajax调用后为零

来自分类Dev

为什么我的Ajax调用返回null

来自分类Dev

Ajax调用什么都不返回

来自分类Dev

同时调用两个命令

来自分类Dev

一个ajax调用阻止其他ajax调用

来自分类Dev

为什么我不能从Angular调用ajax调用

来自分类Dev

为什么两个init函数都被调用

来自分类Dev

这两个jQuery ajax调用之间的主要功能区别是什么?

来自分类Dev

在Backbone.model中使用两个ajax调用将自定义标头设置为ajax调用

来自分类Dev

为什么我们在从ajax json调用获取响应的同时使用data.d?

来自分类Dev

Angular 2 Http Post发送两个Ajax调用而不是一个

来自分类Dev

通过一个AJAX调用加载两个div

来自分类Dev

两个流调用Ajax方法,一个在最后需要额外处理

来自分类Dev

jQuery,同时执行ajax调用和$ .when

来自分类Dev

同时AJAX调用引发错误

来自分类Dev

Ajax调用成功,第二个Ajax调用发送两次

来自分类Dev

如何在Ajax调用中获得两个数组?

来自分类Dev

当两个线程同时调用相同的静态方法时会发生什么?

来自分类Dev

当两个进程同时调用register()时会发生什么

来自分类Dev

如何通过ajax调用将图像和数据作为两个不同的参数发送?

来自分类Dev

如何在单个Django视图中进行两个或更多AJAX调用

来自分类Dev

无法在窗口中调用两个Ajax方法。addEvent('load',function())

Related 相关文章

  1. 1

    jQuery Ajax调用,为什么网络活动中列出了两个请求?

  2. 2

    同时进行2个ajax调用,并在两个都完成时回叫?

  3. 3

    当两个单独的Ajax调用完成时,调用函数的好方法是什么?

  4. 4

    为什么Python会同时调用这两个函数?

  5. 5

    在表单提交时调用两个Ajax函数

  6. 6

    无法按顺序触发两个 jQuery ajax 调用

  7. 7

    两个不同的div中的两个ajax调用

  8. 8

    为什么ajax调用后为零

  9. 9

    为什么我的Ajax调用返回null

  10. 10

    Ajax调用什么都不返回

  11. 11

    同时调用两个命令

  12. 12

    一个ajax调用阻止其他ajax调用

  13. 13

    为什么我不能从Angular调用ajax调用

  14. 14

    为什么两个init函数都被调用

  15. 15

    这两个jQuery ajax调用之间的主要功能区别是什么?

  16. 16

    在Backbone.model中使用两个ajax调用将自定义标头设置为ajax调用

  17. 17

    为什么我们在从ajax json调用获取响应的同时使用data.d?

  18. 18

    Angular 2 Http Post发送两个Ajax调用而不是一个

  19. 19

    通过一个AJAX调用加载两个div

  20. 20

    两个流调用Ajax方法,一个在最后需要额外处理

  21. 21

    jQuery,同时执行ajax调用和$ .when

  22. 22

    同时AJAX调用引发错误

  23. 23

    Ajax调用成功,第二个Ajax调用发送两次

  24. 24

    如何在Ajax调用中获得两个数组?

  25. 25

    当两个线程同时调用相同的静态方法时会发生什么?

  26. 26

    当两个进程同时调用register()时会发生什么

  27. 27

    如何通过ajax调用将图像和数据作为两个不同的参数发送?

  28. 28

    如何在单个Django视图中进行两个或更多AJAX调用

  29. 29

    无法在窗口中调用两个Ajax方法。addEvent('load',function())

热门标签

归档