動態加載的內容點擊事件未觸發

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);          
  });