Question

我有一个主视图，其中有一个按钮“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">&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'事件在模态弹出窗口内呈现的局部视图中不起作用

1 个答案: