javascript - $(document.body).on ('change' , '.someclass' , function () {});不起作用

Question

在我的应用程序中，当文件加载到 html 文件输入标记时，我需要触发一个 JQuery 函数。

下面给出的文件输入代码是引用文章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>

我需要一个在文件加载到输入元素时执行的函数。为此，我编写了以下代码。

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

但是，上面的函数没有被执行。但是如果我用下面的方式写同样的东西，它就会被执行。

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

前一个不工作的原因可能是什么？由于以下问题中讨论的原因，我需要以这种方式实现该功能。

Jquery event handler not working on dynamic content

编辑

根据评论中得到的信息修改了代码。该信息是不要使用原始的 Jquery 函数，而是使用我正在使用的库提供的函数。

还是不行。这是 JSFidle。 https://jsfiddle.net/Viraj_Gamage/2e4eochj/1/

Answer 1

使用events from the plugin您正在使用(如评论中所述)

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

如果您需要委托(delegate)事件，请使用 div.fileinput (或更准确地说:div.fileinput.fileinput-exists)作为选择器

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

示例:

$(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>

或者如 fiddle