DOM Event Delegation isn't functional when using Jasny Bootstrap, how come?

Question

My goal is to run some javascript after the change event for a set of inputs (some dynamically generated). I understand the necessity of DOM Event Delegation and how to implement it, but I'm running into some issues that I can't really explain other than when using Jasny Bootstrap, the Event Listeners do not work.

Here is a code example of my issue, which is also available in this Fiddle with HAML and this Fiddle with HTML.

JQuery                 - Version 1.11.0
Jasny Bootstrap  - Version 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

Not sure why this works, but listening to the bootstrap event change.bs.fileinput seems to work for both occurrences.

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

The solution was sourced from this answer about duplicate listeners for Jasny. I think my problem was a slight bit different than this problem, hence it doesn't belong as an answer to that question and this specific wording might be useful in the future.

Working Haml Fiddle