动态按钮失去Bootstrap样式

Question

我正在动态地使用jQuery添加我的连接按钮

// Add Connect Button

  function addbtn(){

//   alert("ss");

$('.messages:last-child').append('<li><div class="refesh-btn col-md-12 text-center"><button '+
'id="refresh" name="singlebutton" "class="btn btn-lg btn-primary">Connect!</button> </div></li>');

这是插入它的主要html页面：

 <ul class="pages">
    <li class="chat page">
      <div class="chatArea">

        <ul class="messages">
        </ul>

      </div>
      <input class="inputMessage" placeholder="Type here..."/>
    </li>
    <li class="login page">
      <div class="form">
        <h3 class="title">What's your nickname?</h3>
        <input class="usernameInput" type="text" maxlength="14"  /><br/>
        <p id="cap" class="text-xs-center">Hit Enter to stay Anonymous!</p>
      </div>
    </li>
  </ul>

但是它失去了所有的Bootstrap样式并且像这样

Answer 1

您已在方法"之前添加了额外的class' double inverted -comma '。 在这里查看sample。

<强> JS：

function addbtn(){
        $('.messages:last-child').append('<li><div class="refesh-btn col-md-12 text-center"><button '+
'id="refresh" name="singlebutton" class="btn btn-lg btn-primary">Connect!</button></div></li>');
}