JavaScript/Jquery - 调用 html() 后脚本不起作用

Question

我正在使用 ASP.NET MVC (Razor) 和 Jquery，我的页面如下所示 (简单化)。当我第一次加载页面时，一切正常，每个脚本都在工作，我可以打开日期选择器等。但是在我从下拉列表中选择后，我的脚本停止工作。返回的结果是好的(服务器端没有问题)，这里基本上是我将整个表单发送到服务器端，填充数据库中的一些数据并发送回 div 的内容。我可以以某种方式重新初始化脚本或其他东西吗，因为对我来说它看起来像 js/jquery“没有注意到”新内容？

<div id="commissionContent">    
 <table>            
        <tr>
            @Html.DropDownListFor(m => m.OfferId, new SelectList(Model.Offers, "Id", "DocumentNo"),
                        "-- Wybierz --", new { id = "selectedOffer" })
        </tr>          
        <tr>
            <td colspan="5">
                @Html.LabelFor(m => m.RealizationDate)<br />
                @Html.TextBoxFor(m => m.RealizationDate, new { id = "CommissionRealizationDate" })
            </td>
            <td></td>
            <td></td>
        </tr>
</div>

@section JavaScript
{
<script type="text/javascript">
    $(function () {
        $('#CommissionRealizationDate').datepicker({
            format: "dd/MM/yyyy",
            autoclose: true
        });

        offerType.init();            
    });

    var offerType = {
        init: function () {
            //this.selectedKind();
            this.selectedOffer();
        },
        selectedOffer: function () {
            $('form').on('change', '#selectedOffer', function () {
                **$.post("ChoosenCommission", $('form').serialize(), function (data) {
                    $("#commissionContent").html(data);**

                    });
        }
    };
  }

<小时/>

我刚刚注意到 ed-X 说过同样的话，它以前不起作用。问题可能是我从服务器返回整个页面(不仅仅是 div 内容)，它可能搞砸了一些东西(有人知道吗？)。

附注你们 Action 真快，我刚去泡茶，正要回答自己:P

Answer 1

您必须在替换的 html 片段中重新初始化日期选择器和可能的其他事件。

var init = function () {
    $('#CommissionRealizationDate').datepicker({
        format: "dd/MM/yyyy",
        autoclose: true
    });

    offerType.init();            
}

$(init);

var offerType = {
    init: function () {
        //this.selectedKind();
        this.selectedOffer();
    },
    selectedOffer: function () {
        $('form').on('change', '#selectedOffer', function () {
            $.post("ChoosenCommission", $('form').serialize(), function (data) {
                $("#commissionContent").html(data);
                init()
                });
    }
};

}