Question

所以我正在构建这个页面，其中我使用ajax包含文件输入，但是当文件被更改时我无法触发jquery。这是正常的事情还是应该这样做？我试图在输入类型文本字段中显示文件名。

我的ajax电话

$('.wijzigproduct').on('click', function () {
    var productvalue = $(this).val();
    $.ajax({
        url: "includes/productwijzigen.php?q=" + productvalue,
        success: function (result) {
            $('#editproduct').html(result);
        }
    });
});

我的输入字段：

<div class="input-group">
                <span class="input-group-btn">
                    <span class="btn btn-default btn-file">
                        Bladeren… <input type="file" name="imgInpnew" id="imgInpnew">
                    </span>
                </span>
                <input type="text" class="form-control" id='imgOutpnew' readonly>
            </div>
            <img id='imgshownew'/>

我的jquery：

$('#imgInpnew').change(function () {
            var filename = $('#imgInpnew').val();
            filename = filename.substring(filename.lastIndexOf("\\") + 1, filename.length);
            $('#imgOutpnew').val(filename);
        });

Answer 1

您正在使用的change()绑定称为“直接”绑定，它只会将处理程序附加到已存在的元素。它不会受到将来创建的元素的约束。

由于您使用jQuery生成了DOM，因此必须使用on()创建“委派”绑定。以下是您在jsfiddle.net/a70svxto

上提供的代码的解决方案

$.ajax({
  url: "/echo/js/?js=<div class=\"input-group\"><span class=\"input-group-btn\"><span class=\"btn btn-default btn-file\">search… <input type=\"file\" name=\"imgInpnew\" id=\"imgInpnew\"></span></span><input type=\"text\" class=\"form-control\" id='imgOutpnew' readonly></div><img id='imgshownew\'/>",
  success: function(result) {
    $('#div').html(result);
  }
});

$('#div').on('change', '#imgInpnew', function() {
  var filename = $('#imgInpnew').val();
  filename = filename.substring(filename.lastIndexOf("\\") + 1, filename.length);
  $('#imgOutpnew').val(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'></div>

Answer 2

您正在将更改事件附加到DOM中的不存在元素。

您必须先将元素添加到DOM中，然后将事件附加到元素

$.ajax({
  url: "/echo/js/?js=<div class=\"input-group\"><span class=\"input-group-btn\"><span class=\"btn btn-default btn-file\">search… <input type=\"file\" name=\"imgInpnew\" id=\"imgInpnew\"></span></span><input type=\"text\" class=\"form-control\" id='imgOutpnew' readonly></div><img id='imgshownew\'/>",
  success: function(result) {
    $('#div').html(result);
    $('#imgInpnew').change(function() {
  var filename = $('#imgInpnew').val();
  filename = filename.substring(filename.lastIndexOf("\\") + 1, filename.length);
  $('#imgOutpnew').val(filename);
});
  }
});

https://jsfiddle.net/a70svxto/

按钮上的jquery函数从ajax请求中单击

2 个答案: