Jquery ajax:success和ajax:complete&x27；在Rails中使用UJS时不起作用

我有一个链接，当我点击它时，它将触发一个ajax调用，然后用另一个链接替换该链接，例如，原始链接是“添加朋友”，当我点击该链接时，它将发送一个ajax请求以添加朋友操作，如果添加了朋友，则上面的链接将被另一个链接“取消请求”替换，我使用ujs来实现这一点：

$("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>")

有一个成功和完全回调的解决方案吗

注意：我的想法是在触发ajaxStart时显示loader.gif，然后在触发ajax:complete回调时隐藏它，至少在触发ajax:error时显示一些错误

更新

我试图通过将action.js.erb中的代码移动到js文件来解决这个问题，如下所示：

  $(document).ready ->
  $(document).on("ajax:success", "a.invitation-box", ->
    $("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>")
  ).on "ajax:error", "a.invitation-box", ->
    alert "error"

$（文档）.ready->
$（document）.on（“ajax:success”，“a.invitation-box”，->
$（“#为朋友链接”）.html（“”）
).on“ajax:error”、“a.invitation-box”——>
警报“错误”

---

但是这种方式不可能将render（'users/cancel_link'）放在JS文件中

我以前遇到过这个问题，UJS的

ajax:success

和

ajax:complete

不会被触发。但是其他回调也可以工作，比如

ajax:beforeSend

我的修复方法是使用jQuery的全局事件回调来处理它

$("#my_link").on('ajaxComplete', (evt, data, status, xhr) ->
  alert('This is a jQuery ajax complete event!')

另外，UJS使用jQuery的

ajax

发送ajax，因此jQuery的回调肯定会被触发

# https://github.com/rails/jquery-ujs/blob/master/src/rails.js
ajax: function(options) {
  return $.ajax(options);
},

---

我相信你的问题在于JS无法绑定到你的对象，因为它已经被改变了。JS的工作方式是将自身“绑定”/“附加”到DOM（文档对象模型）中的元素。DOM基本上是JS用来调用某些函数的大量元素列表，因此允许您为这些元素分配各种函数。这就是在不同元素上调用“单击”函数的方法

您基本上是在替换调用Ajax的对象，因此当发生“Ajax:success”时，JS无法知道要将其与哪个对象关联，从而阻止函数启动

解决这个问题的方法是绑定到文档，然后将绑定委托给您的div，如下所示：

$(document).on 'ajax:success' , '#my_link', ->
  //do stuff here

---

这意味着，即使该元素动态更改，它仍将绑定函数，从而提供您所需的：）

我也遇到了同样的问题，而问题不在于ajax:success或ajax:complete callback。 问题是，在显示加载的gif图像时，您替换了容器的内容，包括链接本身。因此，应用成功的元素，完全回调不再是DOM的一部分，这就是回调没有被触发的原因

一种解决方案是隐藏元素并附加加载图像，如下所示：

$('#my_link').on "ajax:send", (event, xhr, settings) ->
        $('#my_link').hide()
        $("#my_link_container").append("<image src = 'img.gif' />")

$（“#我的链接”）。在“ajax:send”上，（事件、xhr、设置）->
$（“#我的链接”）.hide（）
$（“#我的链接\容器”）。附加（“”）

然后将触发成功和完全回调。

---

希望它能帮助某些人：）

在你的

action.js.erb中试试这个：

setTimeout(function () {
  ("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>")
});

setTimeout（函数（）{
（“为朋友链接”）.html（“”）
});

这将把html替换放在触发
ajax:
事件后发生的下一个计时器滴答声中。
如果ajax请求不是由jQuery发送的，全局ajax处理程序将不会被它触发。您的意思是说没有办法用UJS来做这件事而不是用jQuery的gobal方法，如果ujs没有使用jquery执行ajax请求。我不知道ujs是什么，但我假设它不使用jquery做任何事情，因为这会增加ujs所做的事情不需要的依赖性。你有没有研究过ujs，看看它是否有任何钩子，你可以用来在它发生之前和之后执行一个动作？@KevinB ujs==不引人注目的JavaScript，rails使用jquery rails和ujs使ajax请求非常容易，这里的问题是，使用ajax和jquery work可以在更高级别的div上仔细观察。你是指#my_link的父div吗，如果是这样的话，我试着用$（“#parent div”）。在“ajaxComplete”。。。但仍然不起作用。似乎您需要添加参数，请检查我的更新。另外，我记得它可能只在文档级别启动，但现在还不确定。因此，如果仍然不起作用，请尝试
$（文档）。在….
上，我添加了参数，但不起作用，我尝试了$（文档）。。它就像一个符咒：）但原因是什么（这是一个好的做法）？我在这里发现了同样的问题，但不能很好地理解解决方案。限制是您不能在发送ajax请求的元素上执行特定的操作，但我没有进一步了解更多。检查Rich Peck的答案，如果这样做更好。“ajax:success”不起作用，如果我改为“ajaxSuccess”（但没有“我的链接”作为第二个参数），如果我加上“我的链接”作为第二个参数不起作用，即使你改为“为你的朋友链接”？我仍然觉得我的答案至少有一些价值，但我想可能还有其他一些地方很酷：）这里有一个很好的资源：#link_for_friend是链接的div父级，如果我更改了它，它也不起作用：（哈哈，情节变厚了！！！！你想跳进聊天吗？通过hi@elsa谈谈会很好你说的没错，但我用另一种（干净的）方法解决了这个问题，我不记得具体是怎么解决的，但如果你想我可以做些研究，那么我告诉你，我接受你的答案。^谢谢你的回答这是一个救命恩人！
setTimeout(function () {
  ("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>")
});