CODEWITHSUNDEEP
javascriptjquery
vigamage
vigamage

Reputation: 2115

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

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/

Upvotes: 2

Views: 4072

Answers (1)

Andreas
Andreas

Reputation: 21911

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

Upvotes: 2

Related Questions