jquery - 使用 jQuery html() 不保留 css？

Question

我有以下 html ( fiddle link )

 <div class="thumbnail_follow" id="follow_btn-2">
   <a  class="btn btn-primary" data-method="post" data-remote="true" rel="nofollow">Follow</a>
 </div>

单击按钮后，我希望该按钮将其自身替换为带有 h​​tml 的取消关注按钮

  <div class="thumbnail_follow" id="follow_btn-2">
<a href="/users/2/unfollow" class="btn btn-danger" data-method="post" data-remote="true" rel="nofollow">Unfollow</a>
</div>

基本上，更改按钮及其指向的链接

我像这样使用 jQuery html()

 $("#follow_btn-2").html('<a class=\"btn btn-danger\" data-method=\"post\" data-remote=\"true\" rel=\"nofollow\">Unfollow<\/a>');

请注意，这是通过代码中的 rails ujs 生成的

$("div[id='follow_btn-<%= @user.id %>']").html('<%=j link_to "Unfollow", unfollow_user_path(@user), :remote => true, :method => :post , :class=>"btn btn-danger"%>');

问题，从 jsfiddle 可以看出, 是一旦按钮被红色按钮替换，它就会跳开，就好像它的样式搞砸了一样..

我不明白是什么导致了跳转以及如何解决它。是 css 问题还是错误的 jQuery 用法？

这里是 fiddle再一次

Answer 1

您需要增加容器的宽度以适合您的按钮。

width: 200px !important;

你的红色按钮比你的蓝色按钮更宽

Fiddle