Событие MVC PartialView onclick работает в первый раз, а затем не работает

Question

У меня есть следующая страница mvc с функцией ajax, которая вызывается на search button, и я регистрирую две функции onclick, когда отображаются результаты частичного просмотра.Однако, когда я нажимаю кнопку sendSms, она работает в первый раз, а затем не работает.Я предполагаю, что это потому, что способ частичного просмотра MVC работает, и я должен был бы зарегистрировать его таким же образом, как я регистрирую #sendSms в функции searchWebPasReferrals ниже.Однако должен быть лучший способ реализации этого?Может кто-нибудь, пожалуйста, руководство?

Родительская страница

@model IEnumerable<HDWA.VirtualClinicSystem.PL.ViewModels.WebPASReferralViewModel>

@{
ViewBag.Title = "Referral";
}


@using (Html.BeginForm("SendSMSForClients", "SMS", FormMethod.Post, new { @class = "form-horizontal", role = "form", id = "sendSMSForm" }))
{

<div class="container">
    <div class="row">
        <div class="col-lg-10">
            <section id="Search">
                <hr />
                <div class="form-group col-md-10">
                    @Html.Label("Specialty", new { @class = "col-md-2 control-label" })
                    @Html.DropDownList("Specialty", (SelectList)ViewBag.Specialty, "- Please select -", new { @class = "form-control" })
                </div>


                </div>

                <br />
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="button" value="Search" class="btn btn-primary" id="searchButton" />
                    </div>
                </div>

            </section>
        </div>
    </div>
</div>
<div class="row">
    <div id="loading" style="display:none" class="col-md-2 col-md-offset-5">
        <img src="~/images/ajax-loader.gif" />
    </div>
</div>



<div id="partial">


    @Html.Partial("_ReferralDetail", Model)
</div>
}
@section Scripts {
<script type="text/javascript">

    $(function () {

        $('#bootStartDate').datetimepicker({
            format: 'DD/MM/YYYY'
        });
        $('#bootEndDate').datetimepicker({

            useCurrent: false, //Important! See issue #1075,
            format: 'DD/MM/YYYY'
        });
        $("#bootStartDate").on("dp.change", function (e) {
            $('#bootEndDate').data("DateTimePicker").minDate(e.date);
        });
        $("#bootEndDate").on("dp.change", function (e) {
            $('#bootStartDate').data("DateTimePicker").maxDate(e.date);
        });


        $.ajaxSetup({
            beforeSend: function () {
                // show gif here, eg:
                $("#loading").show();
            },
            complete: function () {
                // hide gif here, eg:
                $("#loading").hide();
            }
        });

    });

    $('#searchButton').click(function (e) {
        searchReferrals(e);
    });



</script>
}

function searchWebPasReferrals(e) {

    $.ajax({
            url: "/SMS/GetDetails/",
            data: { Specialty: Specialty, Name: Name, Code: Code, Priority: Priority, StartDate: StartDate, EndDate: EndDate },
            cache: false,
            type: "post",
            dataType: "html",
            success: function (result) {
                $('#partial').html("");
                $("#partial").html(result);

                //register the events now because of partial view this has to be registered here or inside the partial view itself. 
                //TODO: should refactor this code for better readability
                $('#checkall').click(function () {
                    var chk = $(this).is(':checked');
                    $('input[type=checkbox]', "#referralData").each(function () {
                        if (chk) {

                            $(this).attr('checked', 'checked');
                        }
                        else {
                            $(this).removeAttr('checked');
                        }
                    });

                });

                $('#sendSMS').click(function () {
                    var formData = $('#sendSMSForm').serialize();
                    $.ajax({
                        type: "POST",
                        url: "/SMS/SendSMSForClients",
                        data: formData, //if you need to post Model data, use this
                        success: function (result) {
                            $("#partial").html(result);
                        }
                    });
                });

            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#partial").html("");
                $('#partial').html('<p>status code: ' + jqXHR.status + '</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText + '</div>');
                console.log('jqXHR:');
                console.log(jqXHR);
                console.log('textStatus:');
                console.log(textStatus);
                console.log('errorThrown:');
                console.log(errorThrown);
            },
        });

}

------------------ Обновлено-----------

Я нашел решение, но не уверен, что это хорошее решение.в событии click для sendSms я вызываю searchWebPasReferrals(e) в случае успеха, который снова запускает поиск и заново регистрирует оба события click.Это хорошее решение?

Answer 1

Это мои два предложения.

Первый Вы можете использовать это, это сработало для меня при возврате частичных представлений

$(document).on("click", "#sendSMS", function(e){
    /// Do your stuff
});

Секунда Вместо регистрации событий в частичном представлении включите события в частичном представлении со встроенным JS, например

Если вы хотите прикрепить событие click к кнопке sendSms, так как это кнопка, она может отображаться в виде, подобном

<button onclick="DoClick()"><\button>

Таким образом, теперь вы пишете функцию на родительской странице

function DoClick(){
    //do the click actions
}