如何对部分动态生成的元素应用Javascript操作？

Question

我使用Cocoon生成嵌套表单。这些嵌套表单的部分内容有一个文件输入，我使用bootstrap filestyle设置样式。

生成文件输入的部分如下所示：

_image_fields.html.haml

.form-group
  -if f.object.filename?
    .col-md-2
      =image_tag(f.object.filename_url(:thumb))
  .col-md-4
    %p
      =f.file_field :filename
  -if f.object.filename?
    .col-md-2
      %p
        =f.check_box :_destroy
        =f.label :_destroy, 'Remove'
%hr

当部分在前一个视图中的循环中加载了n次时，这种方法很好，但是使用此部分动态添加的任何块都不会应用样式。

这是加载相关部分的coffescript的一部分：

ready = ->
  $(':file').filestyle
    buttonText: "Find File"
    buttonBefore: true

$(document).ready(ready)
$(document).on('page:load', ready)

如何绑定样式以便将其应用于使用file输入动态创建的任何元素？

我知道如何绑定onclick事件，但是除了页面加载之外，只有没有事件的类和/或元素类型呢？

编辑（进展！）：

我设法通过绑定到DOMNodeInserted事件来使其工作，具体如下：

  $(document).on 'DOMNodeInserted', ->
    $(':file').filestyle
      buttonText: "Find File"
      buttonBefore: true

它有效，但我必须复制动态创建的文件输入的代码，换句话说，我的最终代码如下所示：

ready = ->
  $(':file').filestyle
    buttonText: "Find File"
    buttonBefore: true
  $(document).on 'DOMNodeInserted', ->
    $(':file').filestyle
      buttonText: "Find File"
      buttonBefore: true

$(document).ready(ready)
$(document).on('page:load', ready)

这是一个肮脏的解决方案，但它可以完成这项工作。如果我找到更好的解决方案，我会发布更新。