title: Binding Click event to dynamically generated div
body: <p>So im trying to create a dynamic image gallery. And each image created would have a div on top for users to click on.  Im unable to bind a click event to the div</p>
  
  <p>The Code</p>
  
  <pre><code>$(document).ready(function()
  {
      if()
      {
  
      }
      else
      {
          var divImgContainer =  '&lt;div id="imgContainer"&gt;';
          var divInfo         = '&lt;div id="info"&gt;';
          var divDetails      = '&lt;div id="details"&gt;';
          var divImage        = '&lt;div id="image"&gt;';
          var divVote         = '&lt;div id ="click"&gt;';
          for(i=0; i&lt;$ImageArray.length; i++)
          {
               document.getElementById("container").innerHTML += divImgContainer+divInfo+divDetails+'Caption&lt;/div&gt;'+divVote+'&lt;/div&gt;&lt;/div&gt;'+divImage+'&lt;a href="img/'+$ImageArray[i].link +'"&gt;&lt;img src="'+$ImageArray[i].thumb+'" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;';
           }
          $('#click').click(function()
          {
              alert("click");
          });
      }
  });
  </code></pre>
  
  <p>Googling gave two popular answers one is <code>$('#click').click(function()</code>  and the other is <code>$('#click').live(click,function()</code>  both of which does not work. </p>
  
  <p>Is there any specific way to bind click events for dynamically generated div?</p>