title: Retrieve ID attr from div tags created 'on the fly'- $("<div/>" and use them in their click function
body: <p>I am creating div tags on the fly inside a for loop.
  The divs are outputted nicely like a chess table and there is a unique id for each. 
  I just don't know how to retrieve it in its click function. 'this.id' or $(this).id doesn't work (I generally use it in $.each methods).</p>
  
  <p><strong>*How could I retrieve/refer to the id inside the click function ? *</strong></p>
  
  <p>I've posted a bigger code part width variables, but the main part is this: </p>
  
  <pre><code>$("&lt;div/&gt;", {
      class: gridClass,
      id: cardID,
      click: function(e) {
          alert(this.id);
      }
  });
  </code></pre>
  
  <p>more from the code:</p>
  
  <pre><code>var init = function() {
      //variable declaration
      var GRID_WIDTH = 2,
          GRID_HEIGHT = 2,
      var FACE_DOWN = 0;
  
      var cont = $("&lt;div/&gt;", {
          id: 'container'
      });
  
      var c1 = "card";
      var c2 = "card cardfirstInRow";
      var gridClass = "";
      var cardID = "";
      // end variable declaration
  
      // creating DIV-s on the fly
      for (var x = 0; x &lt; GRID_WIDTH; x++) {
          for (var y = 0; y &lt; GRID_HEIGHT; y++) {
              y === 0 ? gridClass = 'card cardfirstInRow' : gridClass = 'card';
              cardID = controller.getCardID(); //returns a unique number converted to string
  
              $("&lt;div/&gt;", {
                  class: gridClass,
                  id: cardID,
                  click: function(e) {
                      alert(this.id);
                  }
              }).appendTo(cont);
          }
      }
  }
  </code></pre>