我有一个主视图,其中有一个按钮“AddSkillBtn”,点击后会显示一个带有局部视图的模态弹出窗口。到目前为止工作正常。我在部分视图“addAnotherSkill”中有一个链接,点击后必须显示警告。但是,click事件根本不会被触发。请在下面找到代码段 - 任何帮助非常感谢!!
**jQuery:**
$('#AddSkillBtn').click(function (e) {
$.ajax({
url: '@Url.Action("MyAction", "MyController")',
type: "POST"
success: function (result) {
$("#AddContainer").html(result);
$('#AddModal').modal('show');
}
});
});
$("#addAnotherSkill").on('click', function () {
alert("Hi!!");
});
**Main View**
<p><a id="AddSkillBtn" href="javascript:void(0)" class="btn btn-rounded btn-primary">Add new Skill</a></p>
<div class="modal modal-wide fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="AddLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="AddLabel">Add New Skills</h4>
</div>
<div class="modal-body">
<div id="AddContainer">
</div>
</div>
</div>
</div>
</div>
**Partial View rendered in the modal popup has**
<a id="addAnotherSkill" href="javascript:void(0)"><i class="fa fa-plus"></i> Add Another</a> //clicking on this link does nothing
答案 0 :(得分:0)
您的id="addAnotherSkill"
元素正在动态添加到DOM中。为了使用.on()
函数使用事件委派,它必须是
$(document).on('click', '#addAnotherSkill', function (e) {
e.preventDefault();
...
}
请注意,您应该将document
更改为首次加载页面时存在的元素的最近祖先。
另请注意e.preventDefault()
的使用,这意味着您可以使用<a id="addAnotherSkill" href="#">
(我的偏好,但我看过支持和反对的论据 - 例如the answers here)