Jonathanで.on（）を使ってイベントをフックする

Question

イベントを.on（）メソッドでフックしたい。問題は、イベントが発生する要素のオブジェクト参照を取得する方法がわかりません。たぶんそれは方法が実際に働く方法の中間理解です...しかし、私はあなたが助けることを願っています。ここで

は私が何をしたいです：ファイルが選択されている場合

、私はパスがdiv要素で

<div class="wrapper"> 
    <input type="file" class="finput" /> 
    <div class="fpath">No file!</div> 
</div> 

を表示させたいここに私のスクリプトは

$(document).ready(function() { 
    $this = $(this); 

    $this.on("change", ".finput", {}, function() { 
     var path = $(this).val() 
     $(this).parents().children(".fpath").html(path.split("\\").pop()); 
    }); 
}); 

のようなものですそれだけでは機能しません。この

$(document).ready(function() { 
    $('.finput').on("change", function() { 
      var path = $(this).val() 
      $(this).parents().children(".fpath").html(path.split("\\").pop()); 
     }); 
}); 

Answer 1

あなたは（）で使用する必要がありますか？あなたが何を正確にしようとしているのか分かりません。

$("#wrapper").on("change", ".finput", function(event){ 
    var path = $(this).val() 
    $(this).parents().children(".fpath").html(path.split("\\").pop()); 

}); 

私はあなたのコードをテストしていませんが、on（）をラッパーに付ける必要があります。

change（）を使用できますか？

$('.finput').change(function() { 
var path = $(this).val() 
     $(this).parents().children(".fpath").html(path.split("\\").pop()); 
}); 

Answer 2

同様

Answer 3

これが役立ちます。あなたは、ファイル入力の変更は、それにイベントをバインドするときに表示したい場合は

$("input[type='file']").on("change", function(e){ 
     var path = $(this).val(); 
    }) 

Answer 4

試してみてください。これは.finput要素を意味委任イベントハンドラは、挿入されたされた

$(document).ready(function() { 


    $('body').on('change','input.finput', function() { 
     var path = $(this).val() 
     $(this).parent().children(".fpath").html(path.split("\\").pop()); 
    }); 
}); 

Answer 5

$(document).on("change", ".finput", function() { 
    $(".fpath").html(this.value.split("\\").pop()); 
}); 

動的に、親要素にリスニングを委譲する必要があります。

.finput要素がアヤックスに挿入され、ページのロード時に存在しているされていない場合は、代わりにこのようなものを使用する必要があります。

$(".finput").on("change", function() { 
    $(".fpath").html(this.value.split("\\").pop()); 
});