javascript - 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 append after the button

要附加 HTML，您可以使用 append() .

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

要完全替换/覆盖元素的 HTML，请使用 html() .

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

Jquery append after the button

要一个接一个地添加新元素，请使用 after()

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