jquery - .on 调用 ajax 的方法

Question

我有这个调用 ajax，为了成功，我从 php 打印另一个按钮，它有另一个调用 ajax。如何在.on 之后不再次插入整个调用ajax 来使用方法.on？

阿贾克斯

$('.send_request').click(function(){ // send request ajax

        var id_user_receive = $(this).attr('id');
        var button = $(this);
             $.ajax({
              url: CI_ROOT + 'friendship_ctr/send_request', 
              type: "POST",
              data: "id_user_receive=" + id_user_receive,
              dataType: "html",
              success: function(html) {

                   $('.button-option').html(html);
              $('.remove_u').on('click',function(){
                   $('.remove_u').click(function(){ // i would like short this code

                    var id_user_receive = $(this).attr('id');

                         $.ajax({
                          url: CI_ROOT + 'friendship_ctr/remove_friend', 
                          type: "POST",
                          data: "id_user_receive=" + id_user_receive,
                          dataType: "html",
                          success: function(html) {


                          },
                          error: function(status) {
                               alert(status);
                          }
                      });  

                });
              },
              error: function(status) {
                   alert(status);
              }
          });  
        });

    });

Answer 1

您可以创建一个通用函数来对 url 进行 ajax 调用并将其传递给处理函数，该函数在成功时执行：

  makeAnAjaxCall = function (url, serialized_form_data, callback) {      
            $.ajax({
                type: "POST",
                dataType: "json",
                url: CI_ROOT + url ,
                data: serialized_form_data,
                success: function(data) {
                    callback(data);
                },
                error: function(){
                    alert('Error on ajax call');
                }
            }); 
        }


#Then just call twice like this:

     $('body').on('click','.remove_u', function(){
        return makeAnAjaxCall('friendship_ctr/remove_friend','id_user_receive='+ id_user_receive,handlerRemove(status));
    })

    $('body').on('click','.send_request', function(){
        return makeAnAjaxCall('friendship_ctr/send_request'','id_user_receive='+ id_user_receive,handlerSendRequest(status));
    })

我认为您不了解 .on 的工作原理，请查看 jquery 文档，您不需要将事件侦听器附加到第一个 ajax 调用的成功函数内的按钮，您可以将任何事件绑定到位于该时间在 DOM 中不存在，但可能会出现在您想要执行的 ajax 调用之后。