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

Question

当前，我正在通过下拉单击事件（通过jquery事件）动态加载HTML。出现的问题是我的.on事件函数未找到触发“ a”标签单击事件的选择器。 如果加载的原始页面包含带有带有指定类的“ a”标签的html，则该“ a”标签的click事件可以正常工作，但是如果我通过jquery事件动态加载新内容，则如果可点击的“ a”标签存在，然后单击它，原始页面刚刚发回，没有证据表明“ a”标签click事件触发。

这是动态加载内容的样本；

<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>

这是内容的加载方式，通过WCF服务检索html，我已经确认它可以正常工作；

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

}

这是jquery事件代码，目前此代码仅位于文档就绪代码之外的页面上的脚本块中（如果其中包含也无效）注：出现警报仅是为了证明事件正在触发。 ;

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

Answer 1

您的问题的一部分

这是动态加载内容的样本；

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

---

如此， recipedirections也是动态加载内容的一部分。 您应该使用document或最近的静态容器。 您应该使用recipecard

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