ajax処理時に重複実行されてしまう

Question

起きている問題

ajax処理時、重複されて実行されてしまいます。

    $.ajax({
                    type: 'POST',
                    url: '../ajax_edit_memo.php',
                    dataType: 'text',
                    data: {
                        group_id: group_id,
                        memo_group_id: memo_group_id,
                        memo_group_list: memo_group_list
                    }
                }).done(function() { console.log("test"); }).

このように一回のクリックで重複されて処理されます。

実施したこと

            var jqxhr;  //追記
            $('.memo').on('mouseup', function() {
                var ball_target = $(this).data("target"),
                    ball = document.querySelector(ball_target),
                    memo_group_id = ball.id.slice(9) + " ",
                    group_id = currentDroppable_memogroup.id.slice(15),
                    memo_group_list = 1;
                if (jqxhr) { //追記
                    return;　//追記
                }　　　　　//追記
                jqxhr =　　//追記
                $.ajax({
                    type: 'POST',
                    url: '../ajax_edit_memo.php',
                    dataType: 'text',
                    data: {
                        group_id: group_id,
                        memo_group_id: memo_group_id,
                        memo_group_list: memo_group_list
                    }
                }).done(function() { console.log("test"); }).fail(function() {});
            });

jqxhrを追記しましたが、結果は同じでした。

コード

var ball = document.querySelector('.memo');

$(document).on('dblclick', '.memo', function(event) {
    let ball_id = $(this).data("target");
    let ball = document.querySelector(ball_id);
    let currentDroppable_memogroup = null;
    let shiftX = event.clientX - ball.getBoundingClientRect().left;
    let shiftY = event.clientY - ball.getBoundingClientRect().top;

    //絶対位置で一番上になるように
    ball.style.position = 'absolute';
    ball.style.zIndex = 1000;

    //対象オブジェクトをbody要素に追加
    document.body.append(ball);

    moveAt(event.pageX, event.pageY);

    function moveAt(pageX, pageY) {
        ball.style.left = pageX - shiftX + 'px';
        ball.style.top = pageY - shiftY + 'px';
    }

    function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);

        ball.hidden = true;
        let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
        ball.hidden = false;

        let droppableBelow_memogroup = elemBelow.closest('.memo_area');
        if (currentDroppable_memogroup != droppableBelow_memogroup) {
            if (currentDroppable_memogroup) { // null when we were not over a droppable before this event
                leaveDroppable(currentDroppable_memogroup, ball);
            }
        }

        currentDroppable_memogroup = droppableBelow_memogroup;
        if (currentDroppable_memogroup) {
            var jqxhr;
            $('.memo').on('mouseup', function() {
                var ball_target = $(this).data("target"),
                    ball = document.querySelector(ball_target),
                    memo_group_id = ball.id.slice(9) + " ",
                    group_id = currentDroppable_memogroup.id.slice(15),
                    memo_group_list = 1;
                if (jqxhr) {
                    return;
                }
                jqxhr =
                $.ajax({
                    type: 'POST',
                    url: '../ajax_edit_memo.php',
                    dataType: 'text',
                    data: {
                        group_id: group_id,
                        memo_group_id: memo_group_id,
                        memo_group_list: memo_group_list
                    }
                }).done(function() { console.log("test"); }).fail(function() {});
            });
        }
    }

    document.addEventListener('mousemove', onMouseMove);

    ball.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        ball.onmouseup = null;
    };
});

      <div class="memo_area" style="background-color: gray;width: 10%;height: 10%;padding:50px;margin:50px;"></div>
    </div>
    foreach ($block[$_SESSION[$n]] as $memo) :
        $memo_user = $user->get_user($memo['user_id']);
?>
<div class="memo" id="memo_list<?= $memo['id'] ?>" data-target="#memo_list<?= $memo['id'] ?>" data-toggle="memo_list">

    <div class="memo_list memo_list<?= $memo['id'] ?>">
        <div class="memo_text ellipsis" id="memo<?= $memo['id'] ?>"><?= $memo['text'] ?></div>
        <input type="hidden" value="<?= $memo['id'] ?>">
        <?php
                if (!empty($memo['image'])) :
                    print '<img src="/memo/image/' . $memo['image'] . '" class="memo_img" >';
                endif;
                ?>
        <div id="memo_info<?= $memo['id'] ?>">
            <?php require('memo_info.php'); ?>
            <p class="memo_created_at"><?php print '' . convert_to_fuzzy_time($memo['created_at']) . ''; ?></p>
        </div>
    </div>
</div>

<?php endforeach ?>

参考URL

https://ja.javascript.info/mouse-drag-and-drop
https://www.koikikukan.com/archives/2013/12/11-015555.php

Answer 1

mousemove イベントが起きる度に $('.memo').on('mouseup', function() { が実行されて mouseup イベントに同じ関数が複数登録されているように見えます。

Comments

[karirin3948]

ご回答いただきありがとうございます。
確認します。

Answer 2

記載漏れがありました。
phpコードの中には下記もあります。

       <div class="memo_area" style="background-color: gray;width: 10%;height: 10%;padding:50px;margin:50px;"></div>
    </div>

Comments

[退会済みユーザー]

回答欄に書かないで質問欄を編集して追記してください。

[karirin3948]

再度、質問欄に編集を加えました。失礼しました。