title: Hooking events with .on() with JQUERY
body: <p>I want to hook events with the .on() method. The problem is I don't know how to get the object reference of the element on which the event take place. Maybe it's a midunderstanding of how the method really works... but I hope you can help.</p>
  
  <p>Here's what I want to do:</p>
  
  <p>When a file is selected, I want the path to be displayed in a div</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;input type="file" class="finput" /&gt;
      &lt;div class="fpath"&gt;No file!&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my script</p>
  
  <pre><code>$(document).ready(function() {
      $this = $(this);
  
      $this.on("change", ".finput", {}, function() {
          var path = $(this).val()
          $(this).parents().children(".fpath").html(path.split("\\").pop());
      });
  });
  </code></pre>
  
  <p>Something like that but that way it doesn't work.</p>