title: $(event.target).attr("data-bar") undefined
body: <p>Jquery is showing some very strange behavior regarding accessing a custom data attribute</p>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;div id="foo2" data-bar="bar" class="baz"&gt;some text&lt;/div&gt;
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>$(document).ready(function() {
  
      $("#mainPage").on("click", "[id^='foo']", doSomething);
  
  });
  
  
  function doSomething(e) {
      var bar = $(e.target).attr("data-bar");
  }
  </code></pre>
  
  <p>This gives bar = undefined</p>
  
  <p>However</p>
  
  <pre><code>function doSomething(e) {
          e.target
          var bar = $(e.target).attr("data-bar");
      }
  </code></pre>
  
  <p>gives bar = "bar"</p>
  
  <p>I'm finding it utterly bizarre. On the Chrome debugging console it clearly  shows the dataset or target holding <code>bar: "bar"</code>but without the <code>e.target</code> it returns <code>undefined</code>. Is this some kind of bug?</p>