jquery - 在 Rails 中使用 UJS 时，ajax:success 和 ajax:complete 回调不起作用

Question

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

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

当我尝试添加回调(:success 和:complete)时，它不起作用，我尝试使用 :beforeSend ，如下所示，它有效:

$(document).ready ->
  $("#my_link").on "ajax:beforeSend", ->
    alert("hello")

有成功并完成回调的解决方案吗？

注意:我的想法是在触发 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"

但是这样就不可能将 render('users/cancel_link') 放入 JS 文件中

Answer 1

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

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

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

然后将触发成功和完成回调。希望它对某人有帮助:)