jquery - $(document).on('click' ... $.ajax 呼び出しは 1 回だけ実行されます

Question

子部分ビューを持つビュー (マスター _Layout.cshtml ビュー内) があります。

メイン ビューにボタン (class = get-widgets) があり、コントローラーを呼び出してデータを取得し、子部分ビュー (_WidgetListPartial) に入力します。これはうまくいきます...一度。クリック イベントの登録は、1 回目のクリックで失われ、2 回目以降のクリックでは何も起こらないようです。

また、呼び出しの実行中にdata-loading-textが表示されないことにも気付きました(遅延を強制するための thread.sleep(2000) があります)。

メイン ビューからのコード:

インデックス.cshtml

@model MyApp.Models.WidgetViewModels.MainWidgetViewModel

@{ ViewBag.Title = "Widget Control Panel"; }

<div class="jumbotron">
    <h1>@ViewBag.Title.</h1>
</div>

<div class="row">
    <div class="col-md-6">
        <h2>Widgets</h2>
        <button class="btn btn-default pull-right get-widgets" data-loading-text="Loading ...">Refresh</button><br />
        <div class="widgets">
            @{Html.RenderPartial("_WidgetListPartial", Model.Widgets);}
        </div>

        <p>@Html.ActionLink("Create Widget", "Create", "Widget")</p>
    </div>
</div>


<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>
<script>
    $(document).ready(function () {
        $(document).on('click', '.get-widgets', function (e) {
            var $btn = $(this).prop('disabled', true);
            $.ajax('@Url.Action("GetWidgets", "Desktop")').done(function (html) {
                $('.widgets').html(html);
            }).always(function () {
                $btn.prop('disabled', false);
                alert('You pressed refresh ...');
            });
        });
    });
</script>

更新 **
さらに分析した結果、クリック イベントが実際に発生しているようです。呼び出される関数内に JavaScript の「アラート」メソッドを追加することで、これを証明しました (上記を参照)。したがって、実際の問題は、「$.ajax( ...」呼び出しが 2 回目以降のクリックで実行されないことです (クリックの間にブラウザーのキャッシュをクリアしない限り)。

したがって、私の質問は、「サーバーから取得する必要があるデータがサーバーから取得する必要があるかどうかを $.ajax 呼び出しが実際に認識していない場合、キャッシュに基づいて "$.ajax" 呼び出しが失敗する (または抑制される) のはなぜですか?違うかどうか。

最終更新と解決策

この問題の理由は、まったく同じ URL で再度実行された場合に ajax 呼び出しが「キャッシュ」されるためと思われます (結果の変動は ajax 呼び出し自体の性質に基づいていないため、私の場合はそうです)。ただし、基礎となるデータ リポジトリの状態が変更された可能性があるという事実に基づいています)。したがって、ajax 呼び出しからの要求は、ブラウザーの観点からは同一です。

答えは、 $.ajaxSetup({ cache: false }); を追加することでした。

完全な (作業バージョン) は以下のとおりです。

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>
<script>
    $.ajaxSetup({ cache: false });  // NEEDED TO ENSURE THE AJAX CALL WILL RUN ON EVERY CLICK, AND NOT JUST THE FIRST
    $(function () {
        $(document).on('click', '.get-widgets', function (e) {
            var $btn = $(this).prop('disabled', true);
            $.ajax('@Url.Action("GetWidgets", "Desktop")').done(function (html) {
                    $('.widgets').html(html);
                }).always(function () {
                    $btn.prop('disabled', false);
                });
            e.preventDefault();
        });
    });
</script>