jQuery modal nicht zeigen Name nach dem Schließen und Öffnen

Question

Ich erstelle meine benutzerdefinierten modalen Fenster, wo ich Bild und dieses Bild anzeigen Kommentare und Besitzername zeigen. Wenn ich auf irgendein Bildmodal klicke, wird geöffnet und großes Bild, Autorenname, Anmerkungen usw. zeigen ... Problem ist, wenn ich aktuelles modales schließe und opent es wieder gibt, existiert Name nicht. Aber das erste Mal, wenn ich den modalen Namen öffne, gibt es nur, wenn ich das Fenster schließe und es wieder öffne, existiert der Name nicht. Überprüfen Sie Screenshots. Ich versuche, es mit FireBook-Konsole zu debuggen und GET Antwort geben echten Namen, aber dieser Name wird nicht nach dem Schließen und Öffnen gerendert.

Bild prview ich verwende diesen Code:

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

Und hier modal ist, wo ich anhängen und setzen 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> 

Wie u i auf dem ersten Bild sehen können habe Vornamen und Nachnamen in modal. Auf dem zweiten Bild öffne ich wieder das Modal aber Name und Nachname existiert nicht. Aber überprüfe die Firebug-Konsole, Daten existieren, werden aber nicht gerendert.

Answer 1

Sie haben verschiedene Dinge:

1 - Sie sind mit .html Messing() und .empty():

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

2 - Wie Sie alle Inhalte von #photo_preview .pright löschen, wenn Sie das tun :

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

Dieses Element existiert nicht. Sie können es erstellen oder nicht den ganzen Div-Inhalt leeren.

Sie könnten dies ändern:

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

zu

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

zu nein Um das Element zu löschen, nur den Inhalt darauf.

Answer 2

Ihre Close-Methode entfernt den HTML-Code, der die Metadaten darstellt.

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

Diese Linie leert alle HTML innerhalb . Wenn also photo_author_meta() eine weitere Zeit nach dem Schließen aufgerufen wird, ist h4.photo-author-full-name nicht mehr vorhanden.