Rails Ajax 调用 ajax 上传的图像

Question

我正在学习 Rails，并且了解 ajax 调用的工作原理。但是我有一个问题：我不知道如何将 DOM 中加载的对象上的 ajax 函数与另一个 ajax 函数绑定。

在我的演示页面中，我使用 Plupload 插件上传一些文件：当脚本完成上传我加载的文件时，我使用 ajax，预览窗口中的缩略图。一切正常。

        $("#multi_upload").pluploadQueue().bind('UploadComplete', function(up, files) {
          $.ajax({
            type: "GET",
            dataType: 'html',
            url: $('.wmk_grid#large_grid').data('gallery-url'),
            success: function(result) {
              $('.wmk_grid#large_grid').html(result);
            }
          });
        });
        $('.plupload_header').remove();
        }

每个缩略图都有一个“删除”按钮：在这个按钮上我附加了一个 rails ajax 调用来删除单个图片。

我的咖啡脚本是这样的：

$ ->
  $('.img_action_remove').bind 'ajax:success', (event, data, status, xhr) ->
    $(this).closest('li').remove()

我知道这个问题：当我加载我的页面时，我没有任何带有 .img_action_remove 类的项目：我在使用 plupload 上传图片时创建它们。

如何修复第二个 ajax 调用？

更新：已使用此脚本修复：

$(document).on "ajax:success", ".img_action_remove", (e) ->
  $(e.currentTarget).closest("li").remove()

Answer 1

JQuery Delegation

当我加载我的页面时，我没有任何带有 .img_action_remove 的项目 类：我在使用 plupload 上传图片时创建它们

$('document').on 'ajax:success', '.img_action_remove', (event, data, status, xhr) ->
    $(this).closest('li').remove()

这会将事件绑定到文档并委托给类。意味着你可以随时创建类，并且JS应该总是捕获事件