jquery - ajax 调用 knockout 后 datepicker 不起作用

Question

我使用了如下所述的 knockout 日期选择器

<input type="text" data-bind="datepickertext:[], value:[],  disable:$root.Isdisable" id="date" class="col-xs-11">

datepicker 会在首次加载和图标单击时弹出调用者。ajax 调用后，单击图标时不会弹出日历。

ajax调用是

self.Save = function(VAL, eventType) {
        if (data == true) {
            if (value == 'Submit') {
                $.ajax({
                    url: renderurlpath,
                    contentType: 'application/json; charset=utf-8',
                    cache: false,
                    type: 'GET',
                    success: function(result) {
                        $('#divContentPlaceHolder').innerHTML = '';
                        $('#divContentPlaceHolder').html(result);
                        debugger

                        $('#image_loading').modal('hide');
                    },
                    error: function(xhr, status, error) {
                        $('#image_loading').modal('hide');
                        alert("AJAX Error!");
                    }

                });
            }

我加载到#divContentPlaceHolder的部分 View 是

<fieldset id="fieldset" style="clear:both;display:none">

<div id="CollapseReason" class="panel-collapse collapse in" data-bind="with:$root.PQCCDA">
                                <div class="panel-body" style=" background: #F7F7F7; border: solid 1px #ccc;" data-bind="with:$data.PQCCDAROV">
                                    <!---new code-->
                                    <div class="col-xs-6 no-padding">
                                        <div class="col-xs-12 pq-txt">Reason </div>
                                        <div class="col-xs-12">
                                            <textarea placeholder="Reason for " class="col-xs-12" data-bind="value:$data.ReasonforVisit" rows="4" cols="50"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-xs-6 sub-title-pq">
                                        <div class="col-xs-12 pq-txt">date </div>
                                         <input type="text" data-bind="datepickertext:[], value:[],  disable:$root.Isdisable" id="date" class="col-xs-11">
                                    <!---new code-->
                                    <div class="vspace10 col-xs-12">&nbsp;</div>

                                </div>
                            </div>

                            </fieldset>


                             <script src="~/js/knockout-3.2.0.js"></script>
        <script src="~/js/knockout-jquery-ui-binding.js"></script>
        <script src="~/Scripts/PortalScripts/jquery-ui.js"></script>
        <script src="~/Scripts/PortalScripts/PQCCDA.js"></script>

#divContentPlaceHolder的html代码是

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")

<div id="divContentPlaceHolder" class="col-sm-12 no-padding">

</div>

提前致谢

Answer 1

所以这里有很多问题。首先，您正在从 Parital 加载 Javascript 文件，这可能会导致 Javascript 的多次奇怪执行，覆盖 DOM 中已经事件的 Javascript 变量，谁知道还有什么。没关系，因为你做错了。

您编写类似 ~/js/knockout-3.2.0.js 的脚本应该在你的 _Layout.cshtml 中或者您将部分脚本包加载到的 View.cshtml，并且包应该位于 _Layout.cshtml 中但如果这是您要使用它们的唯一位置，则它们可以位于 View 中，但您在代码中显示的所有 bundle 可能应该位于 _Layout.cshtml 中。在世界上大多数互联网带宽中，如果您是这么想的话，您尝试根据需要通过部分 View 动态加载这些 Javascript 文件，但效率不高或页面加载时间不够快。

仅此一点，您就必须更改，并且永远不要再这样做，永远不要从部分加载 Javascript 库，将 Ajax 加载到 DOM 中，或者 @HTML.Partial ASP.NET 渲染。但这仍然无法解决您的问题。

您正在调用 ko.applybindings 的地方。这是加载的页面上的内容。您必须调用ko.applybindings再次，您可以使用通过链接返回的 jQuery Ajax Promise 来执行此操作:

 $.ajax({
                url: renderurlpath,
                contentType: 'application/json; charset=utf-8',
                cache: false,
                type: 'GET',
                success: function(result) {
                    $('#divContentPlaceHolder').innerHTML = '';
                    $('#divContentPlaceHolder').html(result);
                    debugger

                    $('#image_loading').modal('hide');
                },
                error: function(xhr, status, error) {
                    $('#image_loading').modal('hide');
                    alert("AJAX Error!");
                }

            })
.then(function () {

   ko.applyBindings(AppViewModel, document.getElementById("divContentPlaceHolder"));


});

此外，您在 View.cshtml 中加载的任何包都应该位于 @section scripts{} 中在您的 View.cshtml 中，然后在 </body 的正上方标签在你的 _Layout.cshtml你应该有一个@Section.Render("scripts")定义的。这样你的代码会更干净，你的 Javascript 文件会按其应有的方式最后加载，这里唯一的警告是有时你的 jQuery 库需要位于你的 <head></head> 中。因为随着时间的推移，您在页面加载时很快就开始使用 jQuery，但它还不可用，因为它位于 </body> 的正上方。元素。这只是一个警告，一些更复杂的 Web 应用程序会发生这种情况。