jQueryのは以下のボタン後

Question

を追加するには、私のHTMLた：

<div class="row attachments-container"> 
    <div class="row"> 
     <div class="col-4 row-space-2 h5 invisible" id="js-first-photo-text"> 
      Your first photo appears in search results! 
     </div> 
    </div> 
    <% if !@product.new_record? %> 
     <% @product.product_attachments.each do |attachment| %> 
      <div class="col-xs-6 col-md-4 form-group grayscale"> 
       <img src="<%= attachment.attachment.small.url %>" class="upload-photo-image"> 
       <input type="hidden" name="product_attachment[id][]" value="<%= attachment.id %>"> 
       <button class="delete-photo-btn overlay-btn js-delete-photo-btn delete-attachment" data-photo-id="143275119"> 
        <i class="fa fa-trash-o"></i> 
       </button> 
       <button class="cover-photo-btn cover-overlay-btn js-delete-photo-btn cover-attachment" data-photo-id="143275119"> 
        <i class="fa fa-picture-o"></i> 
       </button> 

      </div> 
     <% end %> 
    <% end %> 

    <div class="col-xs-6 col-md-4 form-group"> 
     <div class="thumbnail panel photo-item empty-photo-frame" name="empty-photo-frame"> 
      <img src="<%= asset_url('add-image-placeholder.png') %>"> 
     </div> 
    </div> 

</div> 

ユーザーonClick次coverを変更することを決定したがトリガするとき：

$('.attachments-container').on('click', '.cover-attachment', function (event) { 
    $this = $(this); 
    var append_html = '<p class="status-notice">Saving as cover....</p>'; 
    $this.find('.cover-attachment').append_html 

    var attachment_id = $(this).parent().find('input[name="product_attachment[id][]"]').val(); 
    $.ajax({ 
     type: "POST", 
     url: "/product_attachments/" + attachment_id + "/set_cover", 
     dataType: "json", 
     data: { 
      'attachment_id': attachment_id 
     }, 
     complete: function (data) { 
      $this.parent().find('.status-notice').text('Saved!').fadeOut('slow'); 
      console.log(data) 
     } 
    }); 
    event.preventDefault(); 
}) 

問題がstatus-noticeが後に追加されていない、ありますcover-attachmentボタン。

Answer 1

問題：

は問題はjQueryのには何のメソッド/プロパティ名append_htmlがないので、これはundefinedを返します。次の文

$this.find('.cover-attachment').append_html 

です。

---

ソリューション：

jqueryのはHTMLを追加するには、ボタン

後を追加し、あなたはappend()を使用することができます。

$this.find('.cover-attachment').append(append_html); 

要素のHTMLを完全に置き換える/上書きするには、html()を使用してください。

$this.find('.cover-attachment').html(append_html); 

のjQuery after()

$this.find('.cover-attachment').after(append_html); 

を使用し、別の後に新しい要素を追加するには 後ボタン

を追加