кнопка click отправляет данные второго клика в базу данных вместо первого php / ajax

Question

У меня есть 1 кнопка, которая меняет свои атрибуты каждый раз, когда я нажимаю на нее, у нее есть 3 варианта: 0, 1 и 2. Если кнопка имеет значение 0 и я нажимаю ее один раз, она изменится на значение 1 в ее html структура работает нормально, но она отправит в БД значение 0, если кнопка находится в 0, но я щелкаю ее дважды, структура html меняется на 2, но отправляет значение 1 в БД.

HTML:

<td class="dt-body-center">
                  <?php if($deposito["subido"] == 0): ?>
                    <button class="btn btn-danger btn-xs btnSubido" idSubido="<?=$deposito["id"]?>" estadoSubido="0">Down</button>
                    <?php elseif($deposito["subido"] == 1):?>
                      <button class="btn btn-success btn-xs btnSubido" idSubido="<?=$deposito["id"]?>" estadoSubido="1">Up</button>
                    <?php elseif($deposito["subido"] == 2):?>
                      <button class="btn btn-primary btn-xs btnSubido" idSubido="<?=$deposito["id"]?>" estadoSubido="2">Ofc</button>
                  <?php endif;?>
              </td>

Javascript:

$(".tablas").on("click", ".btnSubido", function(){
        var idSubido = $(this).attr("idSubido");
    var estadoSubido = $(this).attr("estadoSubido");
        $.ajax({
            url:'ajax/subido.ajax.php',
            method:'POST',
            data:{
                estadoSubido: estadoSubido,
                idSubido: idSubido
            }
        });

        if(estadoSubido == 0){

        $(this).removeClass('btn-danger');
        $(this).addClass('btn-success');
        $(this).html('Up');
        $(this).attr('estadoSubido',1);

    }else if(estadoSubido == 1){

        $(this).addClass('btn-primary');
        $(this).removeClass('btn-success');
        $(this).html('Ofc');
        $(this).attr('estadoSubido',2);

    }else if(estadoSubido == 2){
            $(this).addClass('btn-danger');
            $(this).removeClass('btn-primary');
            $(this).html('Down');
            $(this).attr('estadoSubido',0);
        }
    });

PHP:

require_once '../includes/conexion.php';

$tabla = "depositos";

$item1 = "subido";
$valor1 = $_POST["estadoSubido"];

$item2 = "id";
$valor2 = $_POST["idSubido"];

$sql=" UPDATE $tabla SET $item1 = $valor1 WHERE $item2 = $valor2 ";

$query = false;

if($db->query($sql)===TRUE){      
    $query = true;
}

Answer 1

Похоже, что вы хотите переместить запрос ajax в конец обработчиков кликов, чтобы атрибут элемента html (estadoSubido) изменился до , когда вы выполните запрос .

$(".tablas").on("click", ".btnSubido", function () {
  var idSubido = $(this).attr("idSubido");
  var estadoSubido = $(this).attr("estadoSubido");

  // {if else block}

  // Get the new value, which your click handler changes it to.
  estadoSubido = $(this).attr("estadoSubido"); 
  $.ajax({
    url: "ajax/subido.ajax.php",
    method: "POST",
    data: {
      estadoSubido: estadoSubido,
      idSubido: idSubido,
    },
  });
});