Javascript Ajax加载程序映像不工作

我想显示ajax加载器图像。在我的rails应用程序中，我在一个页面中有三个不同的表单。所有这些页面都是ajaxified的，并且它们都在执行相同的控制器操作。我添加了ajax加载器图像，但当我按一个表单时，图像将显示到页面中的所有表单

我的js文件： $（“#加载密码”）.hide（）； $（“#加载地址”）.hide（）； $（“#加载”）.hide（）

我有三张不同的表格。我不知道这里出了什么问题

---

请帮助大家。

使用

ajaxsend

将这些函数绑定到每个AJAX调用，如下所述：

无论何时发送Ajax请求，jQuery都会触发ajaxSend事件。此时将执行使用.ajaxSend（）方法注册的所有处理程序

基本上，您为每个

ajaxsend

事件绑定了3个函数。 为了实现您的想法，我建议如下：

$(document).bind("ajaxSend", function(){
    $("#loading").hide();
    $("#loading-password").hide();
    $("#loading-address").hide();

  if ( settings.data === "first_form_data" ) {
    $("#loading").show();

  } else if (settings.data === "second_form_data"){

    $("#loading-password").show();

  } else if( settings.data === "third_form_data"){

    $("#loading-address").show();
  }
});

$(document).bind("ajaxComplete", function(){
  if ( settings.data === "first_form_data" ) {
    $("#loading").fadeOut("slow");

  } else if (settings.data === "second_form_data"){

    $("#loading-password").fadeOut("slow");

  } else if( settings.data === "third_form_data"){

    $("#loading-address").fadeOut("slow");
  }
});

基本上，我将单个函数绑定到事件，并检查数据以了解提交了哪个表单。对于

ajaxComplete

，情况也一样

---

在

ajaxSend

文档页面中，他们正在使用URL来发现哪个调用正在发送数据，但在您的情况下，只要我理解，它就不会起作用，因为它们都使用相同的路径。查看更多信息以找到正确的表单。

好的，然后我解决了问题

   $(document).ready(function(){
$("#loading-password").hide();
$("#loading-address").hide();
$("#loading").hide();

});



$('#main-info').submit( function() {
$(this).children(".main-div").children("#loading").show();
});
$('#edit-password').submit( function() {
$(this).children(".main-div").children("#loading-password").show();
});
$('#edit-address').submit( function() {
$(this).children(".main-div").children("#loading-address").show();
});

---

在这里，我已经完全删除了ajax事件，并选择表单提交事件。现在，当我提交一个表单时，它将分别触发ajax加载程序映像。请记住，每个表单下都有一个div，类main div，而我的ajax加载程序div就在这个div内。现在它正在摇摆

谢谢@MarcocI。我解决了我的问题。我更改了我的js代码。我使用了表单提交事件。每个表单都有一个Id。然后我在相应的表单上调用了提交事件，然后在相应的ajax loader div中调用了fadeIn。

   $(document).ready(function(){
$("#loading-password").hide();
$("#loading-address").hide();
$("#loading").hide();

});



$('#main-info').submit( function() {
$(this).children(".main-div").children("#loading").show();
});
$('#edit-password').submit( function() {
$(this).children(".main-div").children("#loading-password").show();
});
$('#edit-address').submit( function() {
$(this).children(".main-div").children("#loading-address").show();
});