ajaxでの二重送信

Question

起きている現象

メッセージ送信をajax通信で組んだのですが、送信する際に重複して実行されてしまいます。

確認したこと

こちらのサイトを参考に修正したのですが、
重複実行を回避することができませんでした。
https://cpoint-lab.co.jp/article/201802/1445/

ソースコード

// メッセージを送信したとき
$(document).on('click', ".message_btn", function() {
    $.ajaxSetup({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
    });
    var current_user_id= $('.current_user_id').val(),
        user_id = $('.destination_user_id').val(),
        text = $('#message_counter').val(),
        current_user_img = $('.image').val(),
        date=new Date(),
        h = date.getHours(),
        mi = date.getMinutes(),
        hh = ('0' + h).slice(-2),
        mmi = ('0' + mi).slice(-2),
        day = hh + ':' + mmi;
        var jqxhr;
        if (jqxhr) {
            return;
        }
        jqxhr = $.ajax({
        type: 'POST',
        url: '/ajax_message_process',
        dataType: 'text',
        data: {
            current_user_id: current_user_id,
            user_id: user_id,
            text: text
        }
    }).done(function() {
        $('.message_add').replaceWith('<div class="my_message"><div class="mycomment right"><span class="message_created_at"> '+ day +' </span><p>'+text+'</p><img src='+current_user_img+'  class="message_user_img"></div></div><input type="hidden" class="message_add">');
        $('#message_counter').val('');
        $('html, body').scrollTop($(document).height());
    }).fail(function() {});
});

<input type="hidden" class="message_add">
        <div class="message_process" style="margin-bottom: 2rem;">
            <div class="message_text">
                <textarea id="message_counter" class="textarea form-control" placeholder="メッセージを入力ください" name="text"></textarea>
                <div class="counter">
                    <span class="message_count">0</span><span>/300</span>
                </div>
                <input type="hidden" class="destination_user_id" name="destination_user_id" value="{{$destination_user->id}}">
                <input type="hidden" class="current_user_id" name="current_user_id" value="{{$current_user->id}}">
                <input type="hidden" class="image" name="image" value="{{asset($current_user->image)}}">
            </div>
            <div class="message_btn">
                <div class="message_image">
                    <label>
                        <i class="far fa-image"></i>
                        <input type="file" name="image" id="my_image" accept="image/*" multiple>
                    </label>
                </div>
                <button class="btn btn-outline-primary message_btn" name="post" value="post" id="post">送信</button>
            </div>
            <div class="message_image_detail">
                <div><img class="my_preview"></div>
                <i class="far fa-times-circle my_clear"></i>
            </div>
        </div>

Answer 1

htmlが無いのでなんとも言えませんがmessage_addクラスが複数あるとかそういうレベルのはなしでは？

追記

シンプルな例でテストしてみる

<script>
$(function(){
  $(document).on('click', ".message_btn", function() {
    $.ajax({
    url: '/ajax_message_process',
    }).done(function(data) {
      console.log(data);
    });
  });    
});
</script>

Comments

[karirin3948]

ご回答ありがとうございます！

すみません、htmlを追記しました。
message_addクラスは１つだけ記述しています。また、検証モードで確認したところajax通信が二重で実行されていました。

[yambejp]

ソースを見る限りajaxは1度しか呼んでないようなので追記したようなシンプルな例で２度飛ばないことを確認しつつ、必要な項目を追加していってみては？

Answer 2

$(document).on('click', ".message_btn", function() {

セレクタ（".message_btn"）が一意ではない為、
document全体に対して "message_btn" class がclickされたときに動作する為
htmlを見ると　message_btn　class が div と button の２つに反応している、ということではないでしょうか。

私の環境ではbutton タグの message_btn class を削除したら１度だけ送信されるようになりました。

変更前 <button class="btn btn-outline-primary message_btn" name="post" value="post" id="post">送信</button>
変更後 <button class="btn btn-outline-primary" name="post" value="post" id="post">送信</button>

htmlが変更できない場合はjs側のセレクタを一意になるように調整するのは如何でしょうか