jQueryモーダル閉じて開いた後の名前が表示されない

Question

イメージを表示するカスタムモーダルウィンドウを作成し、そのイメージにはコメントと所有者名が含まれています。私はいくつかの画像をクリックするとモーダルが開かれ、大きな画像、作者名、コメントなどが表示されます...問題は、現在のモーダルを閉じて、再び名前が存在しないということです。しかし、最初に私はモーダルの名前を開いているときにのみ、私はそのウィンドウを閉じて再び開く名前は存在しません。スクリーンショットを確認してください。 Firebookコンソールでデバッグしようとしましたが、GETレスポンスは本名を返しますが、その名前は閉じて開いた後に表示されません。私はこのコードを使用して画像prviewし

：私は追加およびuは最初の画像I上で見ることができるようなHTML

<div id="photo_preview" style="display:none"> 
    <div class="photo_wrp"> 
     <span class="pull-right close fa fa-times"> </span> 
     <div style="clear:both"></div> 
     <div class="pleft"></div> 
     <div class="pright"> 
      <div class="photo-author-meta"> 
       <div class="media"> 
        <a href="#" class="media-left"> 
         <img alt="64x64" data-src="holder.js/64x64" class="media-object" style="width: 64px; height: 64px;" src="test.png" data-holder-rendered="true"> 
        </a> 
        <div class="media-body photo-author-name-box"> 
         <div class="photo-author-name"> 
          <h4 class="media-heading photo-author-full-name"></h4> 
         </div> 
         <div class="photo-datetime-box"> 
          <div class="photo-date-posted"> Objavljeno: </div> 
         </div> 
        </div> 
       </div> 
      </div>  </div> 
     <div style="clear:both"></div> 
    </div> 
</div> 

を設定する場所

preview: function() { 
     $('body').on('click', '#open-picture-modal', function (e) { 
      e.preventDefault(); 

      $("#photo_preview").show(); 
      var $this = $(this); 
      var guid = $this.data('guid'); 
      var photo_id = $this.data('id'); 

      $.ajax({ 
       method: 'post', 
       dataType: 'json', 
       url: baseurl + '/photo/preview', 
       data: {'photo_id': photo_id}, 
       success: function(data) { 
        Photo.photo_author_meta(photo_id); 
        $(".pleft").html('<img class="fileUnitSpacer" src="'+ $this.data('href')+data['photo_name']+'">'); 
       } 
      }); 

      //window.history.pushState(null, null, pic_url); 

      // $(".image-source").attr("src", $this.data('href')); 
     }); 
    }, 

    // Close image preview modal 
    close: function() { 
     $("body").on("click", ".close", function(e) { 
      e.preventDefault(); 
      $('#photo_preview').hide(); 
      $('#photo_preview .pleft').html('empty'); 
      $('#photo_preview .pright').html('empty'); 
     }); 
    }, 

    // Show photo author meta(name, date created, etc..) 
    photo_author_meta: function(pid){ 
     $.ajax({ 
      method: "post", 
      dataType: 'json', 
      url: baseurl + '/photo/photo_details', 
      data: {'post_id': pid}, 
      success: function(data) { 
       $("h4.photo-author-full-name").html(data['account_firstname'] +'&nbsp;'+ data['account_lastname']); 
      } 
     }); 
    }, 

そして、ここでは、モーダルですモーダルでファーストネームとラストネームを持つ 2番目の画像でもう一度モーダルを開きますが、名前と姓は存在しません。しかし、火かき棒のコンソールをチェックし、データは存在するがレンダリングされない。

Answer 1

あなたは様々なものがあります。

1 - あなたは.htmlをいじりされている（）と.empty（）：

$('#photo_preview .pleft').html(); // or .empty() 

2 - あなたはあなたが行うとき、#photo_preview .prightからすべてのコンテンツを削除したように：

$("h4.photo-author-full-name").html(data['account_firstname'] +' '+ data['account_lastname']); 

この要素は存在しません。作成することも、すべてのdivコンテンツを空にすることもできません。

あなたはこの変更することができます：、ない要素を削除するためには、それにのみコンテンツを

$('h4.photo-author-full-name').html(); // or .empty() 

へ

$('#photo_preview .pright').html(); // or .empty() 

を。

Answer 2

あなたのcloseメソッドは、メタデータをレンダリングするHTMLを削除しています。

ラインが 内のすべてのHTMLを空にしている

$('#photo_preview .pright').html('empty'); 

。したがって、閉じた後にphoto_author_meta（）を呼び出すと、h4.photo-author-full-nameは存在しなくなりました。