Jquery Spinner 无法处理 div 重新加载

Question

设计了一个 div，其中的每个链接都发送一个 ajax 请求。每当我想发送一个 ajax 请求时，我都需要在 div 标题中加载微调器。但我的微调器第一次工作。之后停止工作。如果我将代码粘贴到 div 之外，微调器将按预期工作。

Ajax

 var $loading = $(".loading-spin").hide();
        $(document)
        .ajaxStart(function () {
            $loading.show();
          })
        .ajaxStop(function () {
            $loading.hide();
          });

    jQuery("body").on("click", ".rolesAjax", function(e) {
    e.preventDefault();
    var id = $(this).attr("id");
    var user_id = $(this).attr("user_id");
        $.ajax({
          type: "POST",
          cache: false,
          data:{"id": user_id,"item": id},
          url: "'.Yii::$app->getUrlManager()->createUrl("user/roles-ajax").'",
          dataType: "json",
          success: function(data){  

               $(".reloadDiv").hide();         
               $(".reloadDiv").load(location.href + " .reloadDiv");
               $(".reloadDiv").show();

            },
          error: function (xhr, ajaxOptions, thrownError) {
                     if(thrownError == "Forbidden"){window.location = "http://test.qsims.com/index.php/user/roles-ajax"; }
          }
      });
    });

我的 Reload div 和 loadin-spin 代码。

 <div class="reloadDiv">
        <div  style="float:left;width:235px;background-color:#FFFFFF;border: 1px solid #DDDDDD;margin-right:30px;">
            <h4 style="text-align:center;">Assign Roles</h3>
            <div style='overflow:scroll; width:235px;height:300px;background-color:#FFFFFF;border: 1px solid #DDDDDD;margin:0; float:left'>    
                <div style="width:235px; height:30px;text-align:center;border: 1px solid #DDDDDD;">
                   <span class ="loading-spin" style="margin-bottom:10px;">
                        <?php
                                echo Spinner::widget(['preset' => 'small', 'align' => 'left', 'color' => '#5CB85C']);
                                echo '<div class="clearfix"></div>';
                        ?>
     </span>
                    <h4 style="margin-top:0px; ">
                        <span class="glyphicon glyphicon-arrow-right"></span>
                    </h4>
                </div>

                <?php if($genCount > 0) { ?>
                <h5 style="padding:4px 0px 4px 5px; margin-top:0px; background-color:#2A3F54; color:white;"><b>General Roles </b> </h5>
                    <div class="roles-link" style="margin:-2px 0px 5px 24px;">
                        <?php

                            for ($i = 0; $i<$genCount; $i++){

                                echo Html::a($genRole[$i].'<br>','',['class'=>'rolesAjax', 'id' => $genRole[$i], 'user_id' => $id]);

                            }   
                        ?>
                    </div>
                <?php } ?>

                <?php if($chemCount > 0) { ?>
                <h5 style="padding:4px 0px 4px 5px; margin-top:0px; background-color:#2A3F54; color:white;"><b>Chemical Module </b> </h5>
                    <div class="roles-link" style="margin:-2px 0px 8px 24px;">
                        <?php

                            for ($i = 0; $i<$chemCount; $i++){
                                  '<span class="ss" style="margin:2px 0px 0px 24px;">';
                              echo Html::a($chemRole[$i].'<br>','',['class'=>'rolesAjax', 'id' => $chemRole[$i], 'user_id' => $id]);
                                 '/<span>';
                            }   
                        ?>
                    </div>
                <?php } ?>

                <?php if($riskCount > 0) { ?>
                <h5 style="padding:4px 0px 4px 5px; margin-top:0px; background-color:#2A3F54; color:white;"><b>Risk Assessment Module </b> </h5>
                    <div class="roles-link" style="margin:-2px 0px 5px 24px;">
                        <?php

                            for ($i = 0; $i<$riskCount; $i++){

                                echo Html::a($riskRole[$i].'<br>','',['class'=>'rolesAjax', 'id' => $riskRole[$i], 'user_id' => $id]);

                            }   
                        ?>
                    </div>
                <?php } ?>
            </div>
        </div>

       <!--Current Roles Design -->
       <div class='reloaDiv' style="float:left;width:235px;background-color:#FFFFFF;border: 1px solid #DDDDDD;margin:0;">
            <h4 style="text-align:center;">Current Roles</h3>
            <div style='overflow:scroll; width:235px;height:300px;background-color:#FFFFFF;border: 1px solid #DDDDDD;margin:0; float:left'>

                <div style="width:235px; height:30px;text-align:center;border: 1px solid #DDDDDD;"><h4 style="margin-top:3px; "><span class="glyphicon glyphicon-arrow-left"></span></h4> </div> 
                <h5 style="padding:4px 0px 4px 5px; margin-top:0px; background-color:#2A3F54; color:white;"><b>Assigned Roles </b> </h5>
                <div class="roles-link" style="margin:-2px 0px 5px 24px;">
                        <?php

                            for ($i = 0; $i<$count; $i++){  
                                echo Html::a($user[$i].'<br>','',['class'=>'deleteRoles', 'id' => $user[$i], 'user_id' => $id]);
                            }   
                        ?>
                </div>
            </div>
        </div>

• 我知道这与重新加载内容有关，但不确定它是如何工作的。任何帮助都会很棒。谢谢。。

Answer 1

当您重新加载内容时div；先前定义的引用$loading 正在消失。所以你只需要在你的success处理程序中重新初始化它，如下所示：

success: function(data){  

    $(".reloadDiv").hide();         
    $(".reloadDiv").load(location.href + " .reloadDiv");
    $(".reloadDiv").show();

    $loading = $(".loading-spin"); //reassigning the refrence
    $loading.hide(); //hide the spinner at first
}

希望这应该可行。