изменить текст, используя jquery и ajax

Question

У меня есть скрипт для изменения моей кнопки с «Утвердить» на «Утверждено» в моем jquery и ajax, но проблема в том, что если я нажму на первую строку, другая строка также изменится на «Утверждено».

Это моя кнопка,

<td>
    <button type="button" class="btn indigo approve_button"
            onclick='approve_account("<?php echo $row['ID_users'];?>")'>Approve
   </button>
</td>

И это мой скрипт jquery и ajax:

function approve_account(IDuser){

    $(document).ready(function(){
      console.log(IDuser);
          $.ajax({
            url: "../Queries/approve_user.php",
            type: "POST",
            data: {"IDuser":IDuser},
            success: function(yey){
              $(".approve_button").text("Approved");
              console.log(yey);
              alert(yey);
            }
          });
      });
}

Кроме того, и если я обновляю страницу, кнопки сбрасываются обратно на «Подтвердить».

Снимок экрана: результат нажатия кнопки 1-й строки:

Помогите, пожалуйста?Спасибо.

Answer 1

Во-первых, не помещайте $(document).ready() в другую функцию.Событие ready происходит при загрузке DOM (объектная модель документа).Поскольку это событие происходит после того, как документ готов, это хорошее место, чтобы иметь все другие события и функции jQuery. document-ready doc

Далее необходимо уточнить селектор, чтобы он был нацелен только на текущий элемент HTML, а не на ВСЕ члены класса .approve_button.Это легче сделать без встроенного атрибута onclick.Затем вы можете использовать атрибут данных для передачи значения IDUser с помощью кнопки.

HTML:

<td><button type="button" class="btn indigo approve_button"
            data-iduser="<?php echo $row['ID_users']; ?>">Approve</button></td>

JS:

    $(document).ready(function () {
    $(".approve_button").click(function () {
        var btn = $(this),
            IDuser = $(this).data('iduser');

        console.log(IDuser);
        $.ajax({
            url: "../Queries/approve_user.php",
            type: "POST",
            data: {"IDuser": IDuser},
            success: function (yey) {
                btn.text("Approved");
                console.log(yey);
                alert(yey);
            }
        });
    });
});