Question

我正在使用s3_direct_upload组件。通常，您可以通过将元素绑定到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 + '.');
  });
});

我遇到的问题是如何在动态加载时将其绑定到＃s3-uploader元素。我正在通过Rails部分加载页面，因此没有激活加载事件。

我已经看过JQuery'on'方法，但它需要一个事件，我不确定将它绑定到哪个事件。

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

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

Answer 2

<强> Turbolinks

除Arun P Johny之外，您还需要考虑在JQuery中使用匿名函数。

使用Turbolinks时，您不能依赖在页面加载时运行的匿名函数，因为JS可能会在页面重新加载之间保持不变（turbolinks只刷新页面的<body>标记，而不是{{ 1}}标签，保存请求时间/空间）。

相反，您需要使用Turbolinks Event hooks来处理与您的应用程序相关的各种页面事件：

<head>

基本上，如果您可以委托#app/assets/application.js var your_function = function() { $('#s3-uploader').S3Uploader({ remove_completed_progress_bar: false, progress_bar_target: $('#uploads_container'), }); } $(document).on("page:load ready", your_function);建议的事件，请使用该方法。如果您无法从Arun P Johny元素委派，则应使用此处提到的turbolinks事件

如何将Javascript函数绑定到动态加载的HTML

2 个答案: