title: jQuery: create a div alert you when its is clicked,
body: <p>I can't put a title to it. It's inception :)...  </p>
  
  <p>I have <code>add</code> div, when it is clicked, it creates <code>alert</code> div. When <code>alert</code> div is clicked it alert me.</p>
  
  <p>that is an example.</p>
  
  <pre><code>$("#add").click(function(){
      $("#add").after("&lt;div class='alert'&gt;Alert&lt;/div&gt;");
  });
  
  $(".alert").click(function(){
              alert("Here I am");
  });
  </code></pre>
  
  <p>I noticed if I placed a div in the html template as <code>&lt;div class="alert"&gt;Alert&lt;/div&gt;</code> the alert will work. But if I added the div through the jQuery/JS it will not work.</p>
  
  <p>what is the point of that? 
  to add more inputs and remove it in case he/she added too much, I noticed it didn't work and I wanted to know why:</p>
  
  <p>this is the actual code:</p>
  
  <pre><code>$(document).ready(function(){
      var i           = $("#new_field_count").val();
  
      //add new field
      $("#addnew_field").click(function(){
          i++;
          $("#new_field").before("&lt;div class='fivepadding'&gt;&lt;input name='part1_" + i + "' type='text' placeholder='&lt;?=lang('addform_p1')?&gt;'&gt; = &lt;input name='part2_" + i + "' type='text' placeholder='&lt;?=lang('addform_p2')?&gt;'&gt; &lt;span class='remove clickable'&gt;&lt;?=lang('addform_field_remove')?&gt;&lt;/span&gt; &lt;/div&gt;");
              $("#new_field_count").val(i);
      });
  
      // remove the field
      $(".remove").click(function(){
          i--;
          $(this).parent('div').remove();
          $("#new_field_count").val(i);
      });
  });
  </code></pre>