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'),
});

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