JQuery не срабатывает при первом щелчке, но срабатывает при втором щелчке

Question

Я пытаюсь получить кнопку для запуска AJAX, чтобы обновить мою базу данных на MySQL, а затем запустить функцию JQuery для загрузки (в основном, обновления) другого файла, чтобы обновление страницы не требовалось. Я довольно новичок в JQuery & AJAX, поэтому, возможно, я делаю это совершенно неправильно. Я уже заставил AJAX работать с обновлением базы данных, но JQuery, похоже, регистрирует только второй щелчок.

Я искал тонну в переполнении стека, но я не нашел ничего, что могло бы мне помочь. Наиболее распространенное решение, которое я нашел:

$('#display_details').on('click', '.addpa1', function() {
        $('#display_details').load('project_member_list.php');
});

Это не работает для меня (или я не использую его должным образом).

JQuery

$(document).ready(function(){
    $('.editProject').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.addpa1').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.addpa2').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.rempa2').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.rempa1').click(function(){
        $('#display_details').load('project_member_list.php');
    });
   })

HTML

<a name='addpa1' href='#' class='btn btn-success btn-sm addpa1' id='User.1' role='button' data-proid='2' title='Make PA #1' data-toggle='tooltip'>Make PA #1</a> 
<div id="display_details"></div>

Я привел пример одной кнопки для ограничения беспорядка. Остальные идентичны, кроме имени класса, которое соответствует их функции щелчка.

Дополнительный JS

$( document ).ready(function() {

$( "#showToast" ).click(function() {
$('.toast').toast('show');
});

});

$('#modal').on('shown', function () {
   $("#modal-content").scrollTop(0);
});

Мне нужно дважды щелкнуть для JQueryзарегистрироваться.

Answer 1

Я понял это. Я вызывал две отдельные функции для каждой кнопки (одна для AJAX, другая для JQuery). Помещение содержимого функции JQuery в функцию AJAX решило проблему.

Спасибо всем, кто помог мне в этом вопросе!

Answer 2

Исследовали ли вы ранее Prevent Default характеристику onclick событий?

Иногда значение по умолчанию может вызывать странное поведение, например, если оно не работает при первом щелчке.

Вы можете попробоватьизменение события onclick на что-то вроде этого (для каждого onclick):

$(document).ready(function() {
  $('.addpa1').on('click', (event) => {
    event.preventDefault();
    $('#display_details').load('project_member_list.php');   
  });
})

или что-то вроде этого:

$(document).ready(function() {
      $('.editProject').click(function(event) {
        event.preventDefault();
        $('#display_details').load('project_member_list.php');
      });
    });

Читать о Запретить по умолчанию здесь: event.preventDefault ()

Я думаю, также стоит отметить этот раздел Соответствие ARIA - Роль кнопки ARIA Пример

Где это считается «Несоответствующий пример» :

<a href="#"
     role="button"
    >
  Show alert
</a>

Так что есть шанс, что у вашего примера есть семантические проблемы с точки зрения ARIA.

Дайте мне знать, если это поможет?

Answer 3

Мне интересно, не прикреплен ли элемент к dom до того, как вы попытаетесь щелкнуть по нему. Можете ли вы попробовать это ниже, чтобы увидеть, работает ли он одним щелчком мыши и получаете ли файл console.log?

$('body').on('click', '.addpa1', function(e){
    e.preventDefault();

    console.log('.addpa1 clicked');
    $('#display_details').load('project_member_list.php', function() {
        console.log( 'Load was performed.' );
    });
});

Что произойдет, если вы console.log завершите запрос? Смотри выше.