使用 Jasny Bootstrap 時 DOM 事件委托不起作用，這是怎么回事？

Question

我的目標是在一組輸入（一些是動態生成的）的更改事件之后運行一些 javascript。 我了解 DOM 事件委托的必要性以及如何實現它，但我遇到了一些我無法真正解釋的問題，除了使用 Jasny Bootstrap 時，事件監聽器不起作用。

這是我的問題的代碼示例，也可以在Fiddle with HAML和Fiddle with HTML中找到。

JQuery - 版本 1.11.0
Jasny Bootstrap - 版本 3.1.3

%script{:src => "//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"}
          
<!-- This one works, because there is no `.input-group{"data-provides"=>"fileinput"}` -->
%div.grid-24
  %label{:for => 'attached_file'}
    %span Attach Support Files:
    .grid-21
      #initial-support-files
        #file_field_0.fileinput.fileinput-new
          %input{:type=>"file"}

<!-- This one is broken, because there is `.input-group{"data-provides"=>"fileinput"}` -->
%div.grid-24
  %label{:for => 'attached_file'}
    %span Attach Support Files:
    .grid-21
      #initial-support-files
        #file_field_0.fileinput.fileinput-new.input-group{"data-provides"=>"fileinput"}
          %input{:type=>"file"}

$(document).ready(function() {
  $(document).on("change", "input[type='file']", function(e) {
   console.log("STOP!")
  });
});

Answer 1

不知道為什么會這樣，但是監聽引導事件change.bs.fileinput似乎對這兩種情況都有效。

$(document).on("change.bs.fileinput", function(e) {
  console.log("STOP!")
});

該解決方案來自這個關於 Jasny 的重復偵聽器的答案。 我認為我的問題與這個問題略有不同，因此它不屬於那個問題的答案，這個特定的措辭將來可能會有用。

工作哈姆小提琴