jQuery與切換崩潰

Question

我有一個雙重折疊視圖，單擊按鈕將使圖像“折疊”掉，而文本部分“折疊”打開。 此功能有效。 但是，當我在按鈕上添加onclick()來更改顏色（通過類）和超棒的字體時，會有奇怪的功能。 通常它可以工作，但是通常在重新加載頁面時第一次單擊僅會導致按鈕更改，而不會折疊。 是什么賦予了！？

這是一些代碼，對可能需要的其他注釋：

Haml按鈕和后續折疊部分：

%h2
  Name
  %button.btn.btn-info.pull-right{data:{toggle:"collapse", target:".buy-collapse#{ammo.id}", parent:"accordion"}, onclick:'buyChange($(this))'}
      %i.fa.fa-shopping-cart
        Buy
%hr
// Order Form
.collapse{class:"buy-collapse#{ammo.id}"}
  -# Form is here

= image_tag "ammos/"+ammo.img, :class=>"", :class=>"img-responsive img-centered buy-collapse#{ammo.id} collapse in", :alt=>''

按鈕的內部javascript函數更改：

:javascript
  function buyChange($this) {
    if ($this.hasClass("btn-info")) {
      $this.removeClass("btn-info");
      $this.addClass("btn-danger");
      $this.html('<i class="fa fa-times"> Cancel</i>');
    } else {
      $this.removeClass("btn-danger");
      $this.addClass("btn-info");
      $this.html('<i class="fa fa-shopping-cart"> Buy</i>');
    }
  }

有關我的項目的一些信息，rails -v 4.1，bootstrap，font-awesome

Answer 1

您的文件已經裝好了嗎？ 通常，您不希望像在這里那樣混合使用html和javascript。 請嘗試將以下代碼添加到您的app/assets/javascripts文件夾中的相應javascript文件中：

var ready;
ready = function() {

  // I'd recommend an id selector here
  $('button.btn.btn-info.pull-right').on('click', function() {
    // Add your code to change button and collapse form and
    // whatever else you want to happen on click here.
  });

};

$(document).ready(ready);
$(document).on('page:load', ready);