選択は私が動的に作成された要素にイベントリスナーを持っている

Question

動作しないjqueryのを使用してDIV：

<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>'); 
} 

私は、そのクラスにはいくつかのdiv要素があるため、クラス= inputgroupと最寄りのdiv内の段落を追加したいと思います。 シンプルな$('.inputgroup').append('<p>'+filename+'</p>');を使用するとOKです。段落が作成されます。 これは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>'); 

は、 "クラス" という名前の要素を探している - それは、有効なHTML要素ではありません。

は、私はあなたがあなたの質問のこの行に基づいて

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

を望んでいたと思います

私はクラスで一番近いのdiv内の段落を追加したい= inputgroup

しかし、これをイベントハンドラに直接入れる必要があります。それ以外の場合はthisは別の意味を持ちます

このコード行で

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

Answer 2

は

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

最初の行は、あなたのjQueryオブジェクトを提供します。 pタグを直接追加するために使用できます。

もう1つの答えですでに述べたように、2行目に存在しないclassesという名前の要素が検索されます。

あなたが持っているJqueryオブジェクトを使い、段落を追加するだけです。

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