Rails Update アクションが複数回呼ばれる

Question

こんばんは。Rails Updateについて質問があります。
現在練習で小さなサイトを作っているのですが、Ajaxを用いて呼んでいるUpdateアクションが複数回呼ばれてしまい困っています。ページ遷移後一度目は問題なく一度のみ呼ばれるのですが、以降、Updateでユーザー情報を更新する度に一回ずつUpdateが呼ばれる回数が増えていきます。

以下UpdateのコードとAjaxのコードになります。

def update
  # short_bio = update したい情報
  short_bio = params["short_bio"]
  id = params.require(:id)
  if short_bio.blank?
    rtn_text = 'Default Text'
  else
    User.find_by(id: id).update(bio: short_bio)
    rtn_text = User.find(id).bio
  end
  render text: rtn_text
end

$(document).on('dblclick', '#add-bio', function(e){
  $(this).html("<input id ='update-bio' type='text'>");
  $('#add-bio').keypress(function(e){
    if (e.which == 13) {
      var short_bio = ($('#update-bio').val()).trim();
      var update_user_id = currentpage_userid();

      $.ajax({
        url      : '/users/' + update_user_id,
        data     : {short_bio: short_bio},
        type     : 'PATCH',
        dataType : 'text'
      }).done(function(data){
        $('#add-bio').text(data);
      });
    }
  }
});

下記のクエリの呼ばれる回数がどんどん増えていきます。

Started PATCH "/users/1" for 10.0.2.2 at 2014-12-25 00:04:02 +0900
Processing by UsersController#update as HTML
  Parameters: {"short_bio"=>"bio", "id"=>"1"}
  User Load (0.3ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = ? LIMIT 1  [["id", 1]]
  User Load (0.3ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 1 LIMIT 1
   (0.3ms)  begin transaction
   (0.4ms)  commit transaction
  User Load (0.4ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = ? LIMIT 1  [["id", 1]]
  Rendered text template (0.1ms)
Completed 200 OK in 35ms (Views: 1.9ms | ActiveRecord: 1.6ms)

これは正しい挙動なのでしょうか？
サンタさん、いましたら助けて頂けると嬉しいです。よろしくお願いします。

Answer 1

$(document).on('dblclick', '#add-bio', function(e){ });

このdblclickイベントの「登録」が何回も実行されているということはありませんか？

---

追記：
解決したようで何よりです。
個人的にはこんな感じがいいです。（Ajaxの代わりにconsole.logしてますが）

$(document).on('dblclick', '#add-bio', function(e){
  var jInput = $("<input id ='update-bio' type='text'>")
  jInput.val($(this).text());
  jInput.keypress(function(e){
    if (e.which == 13) {
      var data = $('#update-bio').val();
      console.log("Enter");
      $('#add-bio').text(data);
    }
  });
  $(this).html(jInput);
  jInput.focus();
});

Comments

[Takuyamatsumot6]

回答ありがとうございます。確認してみます！

[Takuyamatsumot6]

確認したところ、keypressとEnterが勝手に何回も押されていました。解決策として

$('#add-bio').unbind().bind().keypress(function(e){});

このようにしたところ一度のみ呼ばれるようになりました！
なぜ何回も呼ばれてしまったのか理由が分からずもやもやしたままです。
もし分かりましたら教えて頂けると幸いです。
サンタさん、ありがとうございました！

[hello-world]

$('#add-bio').keypress
ではなくて
$('#update-bio').keypress
ですね。
add-bio 要素はHTML上にずっと残り続けるので、ダブルクリックするたびにイベントが登録されてしまいます。

[Takuyamatsumot6]

出来ました！ありがとうございます。

Answer 2

N+1問題だと思います。
http://ruby-rails.hatenadiary.com/entry/20141108/1415418367

Comments

[Takuyamatsumot6]

回答ありがとうございます。クエリという書き方に少し誤解があったかもしれません。
Started Patch から Complete 200 Ok までの一式が２回３回と、どんどん増えていく感じです。これもN+１問題なのでしょうか？GemでBulletを入れているのですがN+１のエラーは出ていません。

[Takuyamatsumot6]

解決しました。ありがとうございました！