css - Ajax 正在分层 Bootstrap 按钮

Question

我使用 ajax 来切换“喜欢”按钮而不刷新页面。出于某种原因，当我单击按钮时，在按钮的背景中似乎有几层更大的按钮。我不知道为什么它们会分层或为什么会更大。

问题出在我使用的 Bootstrap 类上。它导致它通过 btn 调用 btn。当我删除该类时，链接会正确重新呈现。因此，我尝试在 CSS 中重新设置 link_to 的样式，使其看起来像一个 btn，但是出现了同样的问题。

这是按钮通常的样子:

点击后:

微博/ helper :

def toggle_like_button(micropost, user)
  if user.voted_for?(micropost)
    link_to "undo", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"unvote_form_#{micropost.id}", :remote => true
  else
    link_to "Into it!", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"vote_form_#{micropost.id}", :remote => true
  end
end

微博/like.js.erb:

$("#vote_form_<%=@micropost.id%>").html("<%= escape_javascript(toggle_like_button(@micropost, @current_user)) %>")
$("#unvote_form_<%=@micropost.id%>").html("<%= escape_javascript(toggle_like_button(@micropost, @current_user)) %>")

微博 Controller :

def like
  @micropost = Micropost.find(params[:id])
  @feed_item = Micropost.find(params[:id])
  if @micropost.user_id != @current_user.id
    if @current_user.voted_for?(@micropost)
      @current_user.unvote_for(@micropost)
      respond_to do |format|
        format.html { redirect_to :back }
        format.js
      end
    else
      @current_user.vote_for(@micropost)
      respond_to do |format|
        format.html { redirect_to :back }
        format.js
      end
    end
  end
end

Answer 1

html(htmlString) 设置所选元素的内容。您选择的元素是按钮。请改用 replaceWith(newContent)。