Функция Jquery не вызывается при вызове модальной всплывающей кнопки отправки при частичном просмотре в ASP.net MVC

0

Я хочу вызвать функцию jquery на кнопку Modal popup submit, которая находится в частичном представлении, но функция не вызывается, если эта кнопка находится в частичном представлении, она вызывается только тогда, когда я помещаю свой модальный всплывающий вид в основном представлении. Как решить эту проблему... Пожалуйста, помогите.. Спасибо

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>
Теги:
asp.net-mvc
asp.net-mvc-4

1 ответ

0

для элементов, которые добавляются в форму после загрузки, вам нужно поместить функцию в документ вместо элемента

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

другим вариантом было бы поместить все события щелчка в функцию

function LoadScript(){
    //jquery code here
}

и затем вызвать эту функцию после частичной загрузки

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню