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> 

当用户决定改变cover以下onClick将触发：

$('.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

问题：

问题出在下面的语句

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

这将返回undefined因为有jQuery的没有方法/属性名称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);