javascript - 如何将 Javascript 函数绑定(bind)到动态加载的 HTML

Question

我正在使用 s3_direct_upload 组件。通常，您可以通过将元素绑定(bind)到 ready 或 load 事件中的函数来启用它，如下所示:

$(function() {
  $('#s3-uploader').S3Uploader(
    {
        remove_completed_progress_bar: false,
        progress_bar_target: $('#uploads_container'),
    }
  );
  error handling
    $('#s3-uploader').bind('s3_upload_failed', function(e, content) {
      return alert(content.filename + ' failed to upload : ' + content.error_thrown + '.');
  });
});

我遇到的问题是如何在动态加载时将它绑定(bind)到 #s3-uploader 元素。我正在通过 Rails 部分加载页面，因此没有触发加载事件。

我查看了 JQuery 的“on”方法，但它需要一个事件，但我不确定将其绑定(bind)到哪个事件。

Answer 1

您可以使用 event delegation将事件处理程序添加到动态添加的元素中

$(document).on('s3_upload_failed', '#s3-uploader', function(e, content) {
    return alert(content.filename + ' failed to upload : ' + content.error_thrown + '.');
});

但是只有在元素加载到 dom 后，您才必须初始化 S3Uploader 插件。所以下面的部分需要在元素加载到dom之后执行

$('#s3-uploader').S3Uploader({
    remove_completed_progress_bar: false,
    progress_bar_target: $('#uploads_container'),
});

您可能需要查看加载动态元素的代码，并向其中添加回调处理程序以执行此操作。