jQuery modal not show name после закрытия и открытия

Question

Я создаю свое собственное модальное окно, где я показываю изображение, и это изображение содержит комментарии и имя владельца. Когда я нажимаю на какой-то образ модальный, открывается и показываю большое изображение, имя автора, комментарии и т. Д. Проблема заключается в том, что я закрываю текущий модальный и не открываю его снова, имя не существует. Но в первый раз, когда я открываю модальное имя, но только тогда, когда я закрываю это окно и открываю его снова, имя не существует. Проверьте скриншоты. Я пытаюсь отлаживать его с помощью консоли firebook и GET ответ возвращает реальное имя, но это имя не отображается после закрытия и открытия.

Для prview изображения я использовать этот код:

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']); 
      } 
     }); 
    }, 

И здесь является модальным, где я добавлять и набор 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> 

Как вы можете видеть на первом изображении я имеют имя и фамилию в модальном формате. На втором изображении я снова открываю какой-то модальный, но имя и фамилия не существуют. Но проверьте консоль firebug, данные существуют, но не отображаются.

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.

Вы можете изменить это:

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

в

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

Для того, чтобы не удалить элемент, только содержание на нем.

Answer 2

Ваш метод close удаляет HTML, который отображает метаданные.

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

Эта линия опустошается все HTML в . Итак, когда photo_author_meta() вызывается в последующее время после закрытия, h4.photo-author-full-name больше не существует.