title: jQuery '.each' and attaching '.click' event
body: <p>I am not a programer but I enjoy building prototypes. All of my experience comes from actionScript2.</p>
  
  <p>Here is my question. To simplify my code I would like to figure out how to attach '.click' events to div's that are already existing in the HTML body.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="dog-selected"&gt;dog&lt;/div&gt;
  &lt;div id="cat-selected"&gt;cat&lt;/div&gt;
  &lt;div id="mouse-selected"&gt;mouse&lt;/div&gt;
  
  &lt;div class="dog"&gt;&lt;img&gt;&lt;/div&gt;
  &lt;div class="cat"&gt;&lt;img&gt;&lt;/div&gt;
  &lt;div class="mouse"&gt;&lt;img&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My (failed) strategy was:<br>
  1) make an array of objects:</p>
  
  <pre><code>var props = {
  "dog": "false",
  "cat": "true",
  "mouse": "false"
  };  
  </code></pre>
  
  <p>2) iterate through the array with '.each' and augment each existing div with a '.click' event. Lastly, construct a local variable. </p>
  
  <p>here is a prototype:</p>
  
  <pre><code>$.each(props, function(key, value) {    
  $('#'+key+'-selected').click(function(){
  var key = value;  
  });
  });
  </code></pre>