title: Can't use jQuery function inside Object Literal
body: <p>I'm trying to learn how the object literals pattern works in Javascript.
  In one of my projects i'm stuck on a part where I use some jQuery functions.
  For the sake of the problem I build a little example.</p>
  
  <p>I hope someone can provide me with some awesome hints.</p>
  
  <p>Javascript: creating an object literal, and calling the init() method.</p>
  
  <p>HTML: Some parts with a remove button. When clicked, I want to display an alert with the associated id extracted as data-attribute from the DOM. But there is the part it is failing, javascript does not know what .data means in that specific function.</p>
  
  <p>Thanks... !
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var test = {
    init: function() {
      this.dom();
      this.events();
    },
    dom: function() {
      this.$contentbox = $('.box');
      this.$buttons = this.$contentbox.find('a');
    },
    events: function() {
      this.$buttons.on('click', this.removeDiv);
    },
    removeDiv: function(event) {
      event.preventDefault();
      var div = this.closest('.removeMe'); // This works perfectly
      var divID = div.data('id'); // Crashing -&gt; Uncaught TypeError: div.data is not a function
      alert('Product ' + divID + ' is to be deleted...');
    }
  }
  
  test.init();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="box"&gt;
    &lt;div class="content"&gt;
      Hi there! Click X to delete item :)
    &lt;/div&gt;
    &lt;div data-id="6" class="removeMe"&gt;
      Product 6 &lt;a href="#"&gt;(X)&lt;/a&gt;
    &lt;/div&gt;
    &lt;div data-id="7" class="removeMe"&gt;
      Product 7 &lt;a href="#"&gt;(X)&lt;/a&gt;
    &lt;/div&gt;
    &lt;div data-id="8" class="removeMe"&gt;
      Product 8 &lt;a href="#"&gt;(X)&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>