目前,我通过下拉点击事件(通过 jquery 事件)动态加载 HTML 出现的问题是我的 .on 事件函数找不到触发“a”标签单击事件的选择器。 如果加载的原始页面包含带有指定类的“a”标记的 html,则该“a”标记的单击事件工作正常,但是如果我通过 jquery 事件动态加载新内容,则如果可单击“a” “标签存在,我点击它,原始页面只是回发,没有证据表明“a”标签点击事件触发。
这是动态加载内容的示例;
<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 <a ID="creamcheesefrosting.txt" class="icing"
href="#">here</a> for frosting recipe</p>
</div>
<div id="recipeimage">
<img src="Images/RecipeImages/carrotcake_160x233.png" alt=""/>
</div>
</div>
以下是内容的加载方式,html 是通过 WCF 服务检索的,我已确认该服务正在运行;
function resetRecipeHtml(html, recipename) {
$("#lblRecipeLegend").text("Recipe for " + recipename);
$("#recipecard").html(html);
}
这是 jquery 事件代码,目前此代码仅位于文档就绪代码之外页面上的脚本 block 中(如果位于其中也不起作用)注意:警报仅用于证明事件正在射击。;
$('#recipedirections p').on('click', 'a.icing', function (e) {
e.preventDefault();
var filename = $(this).attr("id");
alert(filename);
getRecipeHtml(filename);
});
最佳答案
部分问题
这是动态加载内容的示例;
<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);
});
关于javascript - 动态加载的内容点击事件未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20814960/