使用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>');

根据你的问题这一行

我想用class = inputgroup将段落附加到最近的div中

但是你应该把它直接放在事件处理程序中,否则this就有不同的含义

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