特定の動作をしたときに2回目のajaxのレスポンスがcanceledされてしまう

Question

状況

家計簿アプリをRuby on Railsで作成している初学者です。
アイテム登録と削除機能をjQueryのAjaxを利用して非同期処理で実装しました。
アイテム登録を非同期で作成したあとそのアイテムを非同期を削除しようとするとエラーが起こります。
単体での処理は問題なく動作をするので原因の特定が難しいです。

• 削除→登録　○
• 削除のみ　○
• 登録のみ　○
• 登録→削除　✕

希望の動作としては非同期で作成した後でも非同期で削除ができるようにさせたいです。

コード

• ajax部分のjQueryコード

$(function(){
  function buildHTML(item){
    let html = `<li data-delete-li="${item.id}"> 
                  <p>
                    ${item.title}
                  </p>
                  <p>
                    ${item.link}
                  </p>
                  <p>
                    ${item.color}
                  </p>
                  <p>
                    ${item.price}
                  </p>
                  <p>
                    ${item.private}
                  </p>
                  <p>
                    ${item.period_long}
                  </p>
                  <p>
                    ${item.period_unit}
                  </p>
                  <p>
                    ${item.first_payment}
                  </p>
                  <p>
                    ${item.description}
                  </p>
                  <a class="edit_item" href="/users/${item.uid}/items/${item.id}/edit">編集</a>
                  <a class="delete_item" data-delete="${item.id}" rel="nofollow" data-method="delete" href="/users/${item.uid}/items/${item.id}">削除</a>
                </li>`
    return html;
  }

  // 作成時の非同期処理
  $(document).on('submit', '#new_item', function(e){
    e.preventDefault();
    let formData = new FormData(this);
    let url = $(this).attr('action');

    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    

    .done(function(data){
      let html = buildHTML(data);
      $('#result').append(html);
      $('#result').animate({ scrollTop: $("#result")[0].scrollHeight }, 1500);
    })

    .fail(function(){
      alert('投稿に失敗しました');
    })

    .always(function () {
      $('#new_item_btn').prop("disabled", false);
      $('#new_item')[0].reset();
    })
    return false; 
  })

  // 削除時の非同期処理
  $(document).on('click', '.delete_item', function(e){
    e.preventDefault();
    let url = $(this).attr('href');
    let delete_id = $(this)[0].dataset['delete'];

    $.ajax({
      url: url,
      type: 'DELETE',
      headers: {
        'Content-Type': 'application/json',
      },
      data: JSON.stringify({delete_id: delete_id}),
      dataType: 'json',
      processData: false,
      contentType: false
    })

    .done(function(){
      $("li[data-delete-li=" + delete_id + "]").remove();
    })

    .fail(function(){
      alert('削除にに失敗しました');
    })
    return false;
  });
});

• Ruby on Railsでのコントローラ(アクションはajax部分のみに絞ってあります)

class ItemsController < ApplicationController
  before_action :set_item, only: [:edit, :update, :destroy]

  def create
    @item = Item.new(item_params)
    if @item.save
      respond_to do |format|
        format.json
      end
    else
      redirect_to root_path
    end
  end

  def destroy
    if @item.destroy
      respond_to do |format|
        format.json 
      end
    else
      redirect_to root_path
    end
    
  end

private

  def item_params
    params.require(:item).permit(:title, :link, :color, :plan, :price, :private,
                                payment_attributes:[:id, :period_long, :period_unit, :first_payment, :pay_method, :description]).merge(user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])
  end
end

• 作成時に返すJsonファイル(jbuilderを使っています)

json.id            @item.id
json.uid           current_user.id
json.title         @item.title
json.link          @item.link
json.color         @item.color
json.plan          @item.plan
json.price         @item.price
json.private       @item.private
json.period_long   @item.payment.period_long
json.period_unit   @item.payment.period_unit
json.first_payment @item.payment.first_payment
json.description   @item.payment.description

• 削除時に返すJsonファイル

{"status":"ok"}

エラーメッセージ

仮説

１．今はajaxが別れているがdeferredを用いて作成後の後に働くajaxとしても削除のajax処理を書かないといけないのではないか？
２．ajaxが２重送信として受け取られているためにRails側の自動推測でhtmlレスポンスに切り替わってしまっているのではないか？

環境

Mac OS 10.15
Ruby 2.5.1
Rails 5.2.4.1
Docker 19.03.5

Answer 1

ソースコードはじっくり見ていないのですが、jQueryがきちんと動かないようだとまずturbolinksの影響を考えたほうがよいかと思います。
もしそれが原因だとすると下記のようにしてみてください。

jQuery(document).on('turbolinks:load', function(){
   #ここにコードを書く
});

Comments

[iwonder]

ご回答ありがとうございます。
turbolinksはassetとviewのapplicationからも記述を消し、切ってあるので影響はまずないと考えています。

[no1knows]

あぁ、そうなんですね。もったいない。。。

jQueryあるあるのこことかはいかがでしょうか？
https://blog.keisuke11.com/webdesign/click-event-after-append/

[iwonder]

最初は似たようなものかなと思い、非同期後に追加される削除のDOMがイベントハンドラに登録されていないと考え、
$('.delete_item').on('click', function(e){...
↓
$(document).on('click', '.delete_item', function(e){...
に変更したのですが今の結果となってます。
多分ですがjQuery側ではなくRails側での設定ではないかと疑っている次第です。

Answer 2

turbolinksを有効化し、コントローラを登録と削除を分けたところ期待していた動作を行うようになりました。

Comments

[iwonder]

分けたコントローラを戻してみましたが同じく期待した動作をしました。
原因としては、turbolinksを切ったことか切り方がまずかったと推測されます。