Добавление одного и того же обработчика события (ajax) для одного и того же события более чем для одного элемента, неправильно устанавливающего значение атрибута в jQuery | jQuery | Ajax

Question

У меня есть два поля ввода, и я добавил тот же обработчик события key up, который вызывает запрос ajax. Я хочу выполнить некоторый фрагмент (включить текстовое поле) для события «complete», но они не работают независимо.

<input type="text" name="ele1" id="ele1">
<input type="text" name="ele2" id="ele2">

$(function() {
    let ele1 = $('#ele1');
    let ele2 = $('#ele2');
    $("#ele1, #ele2").on('keyup', resourceChange);
    function resourceChange(e) {
        $this = $(this);
        $this.prop('disabled', true);
        $.ajax({
            url: "test_upload.php",
            type: "POST",
            cache: false,
            processData: false,
            contentType: false,
            dataType: 'json',
            complete: function(xhr) {
                response = xhr.responseJSON;
                $this.prop('disabled', false);
            }
        });
    }
});

для целей тестирования, я вручную добавляю задержку в 5 секунд.

<?php
// test_upload.php
sleep(5);
$response = [
    'success' => true,
    'name' => 'test_name'
];
header('Content-Type: application/json');
echo json_encode($response);

Проблема: Когда я набираю символ в первом текстовом поле, он будет отключен на следующие пять секунд (обратный отсчет запуска). Но если я наберу во втором текстовом поле до завершения этих 5 секунд (скажем, через 3 секунды), то первое текстовое поле никогда не включается. Осталось отключить. и второе текстовое поле активируется после оставшихся секунд от 5 секунд. (5 - 3 = 2 секунды)

Answer 1

Попробуйте это, отправив элемент через ajax и получите его.

<input type="text" name="ele1" id="ele1">
<input type="text" name="ele2" id="ele2">

$(function() {
$("input").on('keyup', resourceChange);
function resourceChange(e) {
    element = $(this).attr('name');
    $(this).prop('disabled', true);
    $.ajax({
        url: "test_upload.php",
        type: "POST",
        cache: false,
        processData: false,
        contentType: false,
        data: 'element='+element,
        dataType: 'json',
        complete: function(xhr) {
            response = xhr.responseJSON;
            $('input[name="'+response.element+'"]').prop('disabled', false);
        }
    });
}
});

php

 <?php
// test_upload.php
sleep(5);
$response = [
  'success' => true,
  'name' => 'test_name',
  'element' => $_POST['element']
];
header('Content-Type: application/json');
echo json_encode($response);

Answer 2

Вы должны захватить ответ. А потом решите, что вам нужно сделать.

Попробуйте это.

<input type="text" name="ele1" id="ele1">
<input type="text" name="ele2" id="ele2">
<input type="text" name="ele3" id="ele3">
<input type="text" name="ele4" id="ele4">

---

$(function() {
        var respCount = 0;
        var selectedElem = [];
        let ele1 = $('#ele1');
        let ele2 = $('#ele2');
        let ele3 = $('#ele3');
        let ele4 = $('#ele4');

        var idx = 0;
        $("#ele1, #ele2, #ele3, #ele4").on('keyup', resourceChange);
        function resourceChange(e) {

            $this = $(this);
            selectedElem.push({id: $this[0].id});

            $this.prop('disabled', true);
            $.ajax({
                url: "test_upload.php",
                type: "POST",
                cache: false,
                processData: false,
                contentType: false,
                dataType: 'json',
                complete: function(xhr) {
                    response = xhr.responseJSON;

                    $(`#${selectedElem[respCount].id}`).prop('disabled', false);

                    respCount++;

                }
            });


        }



    });