divのリロードでJquery Spinnerが動作しない

Question

div内で、すべてのリンクがajaxリクエストを送信するように設計されています。私がAjaxリクエストを送信したいときはいつも、divの見出しにスピナーをロードする必要があります。私のスピナーは初めてです。その後、動作を停止します。 divの外側にコードを貼り付けると、スピナーは期待どおりに動作します。

アヤックス

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"; } 
      } 
     }); 
    }); 

マイリロードのdivとLoadinのスピンコード。あなたがリロードされると、私はそれを知っている

<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

.. great.Thankだろうあなたのコンテンツ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 
} 

希望を。