在ASP.net MVC的局部视图中调用模态弹出提交按钮时，不调用Jquery函数

I want to call jquery function on Modal popup submit button, which is in partial view but the function is not called if that button is in partial view, it is only called when i put my modal pop up in main view. How to solve this issue... Please help .. Thanks

我想在Modal弹出提交按钮上调用jquery函数,该按钮在局部视图中但如果该按钮在局部视图中则不调用该函数,只有在我将模态弹出主视图时才调用它。如何解决这个问题...请帮忙..谢谢

Index.cshtml

 @Html.ActionLink("Create", "Create", null, null, new { id = "btnCreate", @class = "btn btn-small btn-info" })
    <script type="text/javascript">
        $(function () {
            $.ajaxSetup({ cache: false });
            $('#btnCreate').click(function () {
                alert("function called");
                $('.modal-dialog').load(this.href, function () {
                    $('#ShowModalDialog').modal({
                        backdrop: 'static',
                        keyboard: true
                    }, 'show');
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#Useremail').blur(function () {
                alert("func called");
                $.ajax({
                    type: 'POST',
                    contentType: "application/json; charset=utf-8",
                    url: 'Home/Search',
                    data: "{'searchString':'" + document.getElementById('Useremail').value + "'}",
                    async: false,
                    success: function (response) {
                        alert("Record found");
                    },
                    error: function () { alert("record not found"); }
                });
            });
        });
    </script>
    <div id='ShowModalDialog' class='modal fade in'>
        <div class='modal-dialog'>
        </div>
    </div>
</body>
</html>

_Create.cshtml PartialView

@model MvcTwitterBootstrap.Models.UserDetail
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            Registration</h3>
    </div>
    @using (Html.BeginForm("Create", "Home", FormMethod.Post, new { @class = "modal-form" }))
    {
        @Html.ValidationSummary()

        <div class="modal-body">
            <div>
                @Html.LabelFor(x => x.UserEmail)
                @Html.TextBoxFor(x => x.UserEmail, new { @id = "Useremail" })
                @Html.ValidationMessageFor(x => x.UserEmail)
            </div>
            <div>
                @Html.LabelFor(x => x.UserPassword)
                @Html.TextBoxFor(x => x.UserPassword, new { id = "Userpassword" })
                @Html.ValidationMessageFor(x => x.UserPassword)
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">
                Cancel</button>
            <button class="btn btn-primary" type="button" id="btnsubmit">
                Save</button>
        </div>
    }
</div>

1 个解决方案

#1

for items that are added to the form after load you need to put the function on the document instead of the item

对于在加载后添加到表单的项目,您需要将该函数放在文档而不是项目上

$(document).on('click', '#btnCreate', function(){
    //code
});

the other option would be to put all of the click events in a function

另一种选择是将所有点击事件放在一个函数中

function LoadScript(){
    //jquery code here
}

and then call that function after the partial is loaded

然后在加载部分后调用该函数

$('#divContent').html(result);
LoadScript();

#1