动态加载的内容点击事件未触发

Question

Currently, I am dynamically loading HTML via a dropdown click event (via jquery event) The problem that arises is my .on event function is not finding the selector to fire the "a" tag click event. If the original page that is loaded contains html with the "a" tag with the specified class, the click event for that "a" tag works fine, BUT if I dynamically load new content via the jquery event, then IF a clickable "a" tag exists and I click it, the original page just posts back, there is no evidence of the "a" tags click event firing.

Here is a sample of the dynamically loaded content;

<div id="recipedirectionsandimage">
    <div id="recipedirections">
        <h2 class="recipedirectionsheader"> Recipe Directions</h2>
        <ol class="recipesteps">
            <li>Pre-Heat oven to 350°, Grease two 9" springform pans</li>
            <li>Sift all dry ingredients into a large bowl</li>
            <li>Add corn oil, eggs and vanilla, mix well</li>
            <li>Fold in walnuts, coconut, carrots and pineapple</li>
            <li>Pour batter into the greased pans</li>
            <li>Bake for 50 minutes on the middle racks</li>
        </ol>                    
        <p>Click&nbsp;<a ID="creamcheesefrosting.txt" class="icing" 
            href="#">here</a>&nbsp; for frosting recipe</p>
    </div>
    <div id="recipeimage">
        <img src="Images/RecipeImages/carrotcake_160x233.png" alt=""/>
    </div>
</div>

Here is how the content is loaded, the html is retrieved via a WCF service which I've confirmed is working;

function resetRecipeHtml(html, recipename) {
$("#lblRecipeLegend").text("Recipe for " + recipename);
$("#recipecard").html(html);

}

Here is the jquery event code, for now this code is just in a script block on the page outside the document ready code ( doesn't work if it's in it either) Note: The alert is there only to prove the event is firing.;

 $('#recipedirections p').on('click', 'a.icing', function (e) {
      e.preventDefault();
      var filename = $(this).attr("id");
      alert(filename);
      getRecipeHtml(filename);          
  });

Answer 1

Part of your question

Here is a sample of the dynamically loaded content;

<div id="recipedirectionsandimage">
    <div id="recipedirections">

---

As, recipedirections is also a part of dynamically loaded content. You should use document or nearest static container. You should use recipecard

 $("#recipecard").on('click', 'a.icing', function (e) {
      e.preventDefault();
      var filename = $(this).attr("id");
      alert(filename);
      getRecipeHtml(filename);          
  });