$(document.body).on('change', '.someclass', function () {}); Does not work

Question

In my application, I need a JQuery function to be fired when a file is loaded to html file input tag.

The file input code which is given below was implemented referring the article http://www.jasny.net/bootstrap/javascript/#fileinput.

<div class="fileinput fileinput-new" data-provides="fileinput">
    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
    <div>
        <span class="btn btn-default btn-file">
            <span class="fileinput-new">Select image</span>
            <span class="fileinput-exists">Change</span>
            <input type="file"  class="tenderImage">
        </span>
        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
</div>

I need a function to be executed when a file is loaded to the input element. For that, I wrote following code.

$(document).ready(function(){
    $(document.body).on('change','.tenderImage', function(){
         alert("fired");
     });
});

However, above function is not getting executed. But if I write the same thing in following way, it gets executed.

$(document).ready(function(){
    $('.tenderImage').change(function(){
          alert("fired");
    });
});

What could be the reason for the one former to not to work.? I need to implement the function in that way because of the reason discussed in following question.

Jquery event handler not working on dynamic content

EDIT

Changed the code according to the information obtained from the comments. The information was to not use original Jquery functions, instead use the functions given by the library I am using.

Still it does not work. Here is the JSFidle. https://jsfiddle.net/Viraj_Gamage/2e4eochj/1/

Use the events documented in the plugin you are using. I suspect the plugin is stopping propagation but it's api exposes events for you — charlietfl, Apr 22 '17 at 11:57
[`.on("change.bs.fileinput", ...)`](http://www.jasny.net/bootstrap/javascript/#fileinput-usage) — Andreas, Apr 22 '17 at 12:00
@Andreas, @charlietfl I changes it to `$(document.body).on("change.bs.fileinput",".tenderImage", function(){ alert("fff"); });` . But the function does not get called. Here is the JsFiddle. https://jsfiddle.net/Viraj_Gamage/2e4eochj/ — vigamage, Apr 22 '17 at 12:26

score 2 · Accepted Answer · answered Apr 22 '17 at 12:48

Use the events from the plugin you're using (as mentioned in the comments)

$(document.body).on("change.bs.fileinput", function() {
  alert("changed");
});

And if you need a delegated event use div.fileinput (or more precisely: div.fileinput.fileinput-exists) as the selector

$(document.body).on("change.bs.fileinput", "div.fileinput.fileinput-exists", function() {
  alert("changed");
});

Example:

$(document.body).on("change.bs.fileinput", "div.fileinput.fileinput-exists", function(e) {
  alert("changed");
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<div class="fileinput fileinput-new" data-provides="fileinput">
    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
    <div>
        <span class="btn btn-default btn-file">
            <span class="fileinput-new">Select image</span>
            <span class="fileinput-exists">Change</span>
            <input type="file"  class="tenderImage">
        </span>
        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
</div>

Or as fiddle

$(document.body).on('change', '.someclass', function () {}); Does not work

1 Answers1