title: Jquery click event not firing on the element created dynamically using jquery
body: <p>I am trying to make a simple functionality where user selects some value from drop down and then clicks on the add button to add the selected item in the below div in the form of tag.</p>
  
  <p>Each added tag has a remove anchor which when clicked removes the tag.</p>
  
  <p>Now when clicked on add button the tags are being inserted correctly,
  But when I clicked on the remove button over tag, the click event is not firing.</p>
  
  <p>However if I hard coded some tags with exact same markup as that of dynamically generated tags, the click event for remove tag is firing exact properly and the tag is being removed as I wanted.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;select id="ddlTagName"&gt;
      &lt;option value="1"&gt;Tag One&lt;/option&gt;
      &lt;option value="2"&gt;Tag Two&lt;/option&gt;
      &lt;option value="3"&gt;Tag Three&lt;/option&gt;
  &lt;/select&gt;
  &lt;input id="btnInsertTag" type="button" value="Add"/&gt;
  &lt;br/&gt;
  
  &lt;div id="TagsHolder"&gt;
    &lt;span class="tag"&gt;
        &lt;span&gt;Tag One HardCoded &lt;/span&gt;
        &lt;a class="remove"&gt;X&lt;/a&gt;
    &lt;/span&gt;
  
    &lt;span class="tag"&gt;
        &lt;span&gt;Tag Two HardCoded &lt;/span&gt;
        &lt;a class="remove"&gt;X&lt;/a&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>    $("#btnInsertTag").click(function () {
      var selectedTagText = $("#ddlTagName option:selected").text();
      var selectedTagValue = $('#ddlTagName').val();
      var generateMarkup = '&lt;span class="tag" data-value="' + selectedTagValue + '"&gt;&lt;span&gt;' + selectedTagText + ' &lt;/span&gt;&lt;a class="remove"&gt;X&lt;/a&gt;&lt;/span&gt;';
      $("#TagsHolder").append(generateMarkup);
  });
  
  $(".remove").click(function () {
      alert('click event triggered');
      $(this).parent(".tag").remove();
  });
  </code></pre>
  
  <p>My question is that why the <strong>click event</strong> is not firing for the <strong>dynamically generated</strong> tags.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/c7aGg/8/">Demo</a></p>
  
  <p>Thanks in advance</p>