Jquery .on 'click' 事件在模态弹出窗口内呈现的局部视图中不起作用

Question

我有一个主视图，它有一个按钮 "AddSkillBtn"，单击该按钮会显示一个内部有部分视图的模式弹出窗口。到目前为止工作正常。我在部分视图 "addAnotherSkill" 中有一个 link，单击它必须显示警报。但是，点击事件根本不会被触发。请在代码片段下方找到 - 非常感谢任何帮助！！

**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">&times;</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

Answer 1

您的带有 id="addAnotherSkill" 的元素正在动态添加到 DOM。为了使用 .on() 函数使用事件委托，需要

$(document).on('click', '#addAnotherSkill', function (e) {
  e.preventDefault();
  ...
}

请注意，您应该将 document 更改为首次加载页面时存在的元素的最近祖先。

还要注意 e.preventDefault() 的使用，这意味着您可以只使用 <a id="addAnotherSkill" href="#">（我的偏好，但我看到了赞成和反对的论点 - 例如 the answers here）

Jquery .on 'click' 事件在模态弹出窗口内呈现的局部视图中不起作用

Jquery .on 'click' event doesn't work in a partial view rendered inside modal popup

modal-dialog

asp.net-mvc-5