javascript - 使用 jquery 选择 div 不起作用

Question

我在动态创建的元素上有一个事件监听器:

<script>
        $(document).on('change', '.inputfile', function() {
            var name = ($(this).val().split('\\').pop());
            selectFile(name);
        });
</script>

选择文件后，我想附加一段显示文件名本身。我的问题是 jquery 选择器不起作用:

function selectFile(filename) {
        alert(filename);
        var classes = $(this).closest('.inputgroup');
        $('classes').append('<p>'+filename+'</p>');
}

我想将段落添加到最近的带有 class=inputgroup 的 div 中，因为该类有多个 div。使用简单的$('.inputgroup').append('<p>'+filename+'</p>');就可以了，段落已创建。这是 HTML:

<div class="inputgroup">
   <label class="btn btn-default btn-info" style="margin-top: 8px">
         Browse <input type="file" style="display: none;" class="inputfile"/>
   </label>
   <button type="button" class="btn btn-outline-danger" onclick="myAjax()">Ok</button>
   <span id="remove_field" class="glyphicon glyphicon-remove" aria-hidden="true" style="vertical-align: middle"></span>
</div>

Answer 1

这一行

$('classes').append('<p>'+filename+'</p>');

正在搜索名为“classes”的元素 - 这不是有效的 HTML 元素。

我想你想要

$(this).closest('.inputgroup').append('<p>'+filename+'</p>');

根据您的这一行问题

I would like to append the paragraph in the nearest div with class=inputgroup

但是你应该将其直接放入事件处理程序中，否则 this 具有不同的含义

$(document).on('change', '.inputfile', function() {
    var name = ($(this).val().split('\\').pop());
    $(this).closest('.inputgroup').append('<p>'+name+'</p>');
});