при клике ajax результат всегда обновляет последний нажатый элемент - PullRequest
0 голосов
/ 30 апреля 2020

Рассмотрим следующий код: если я щелкаю 3 ссылки подряд, последний нажатый «раздел» обновляется 3 раза, первые 2 остаются теми же. (при условии, что вы нажмете 3 ссылки до окончания ajax)

<div><span class="show-records">click me</span></div>
<div><span class="show-records">click me</span></div>
<div><span class="show-records">click me</span></div>
$('.show-records').on('click', function(e) {
    el = $(this).parent(); // get parent of clicked link
    $.ajax({
        url: "...",
        method: 'POST',
        data: $(this).data('data'),
        beforeSend: function() {
            el.html('<p style="margin-left: 24px;">loading <span class="loading-spinner"></span></p>'); // show a spinner
        },
        error: function() {
            alert("{{ 'unknown error'|trans({}, 'alerts') }}");
        }
    }).then(function(html) {
        el.html(html); // update html with table
    });
});

Я могу только предположить, что это происходит потому, что моя переменная el обновляется с каждым щелчком, и "затем" всегда использует последний el

Как я могу изолировать родительский элемент между каждым событием щелчка?

Я пытался использовать success & complete функции внутри $.ajax, но this & $(this) больше не является нажатым элементом.

Ответы [ 2 ]

2 голосов
/ 30 апреля 2020

Проблема, по-видимому, заключается в том, что переменная el нигде не была формально объявлена. Использование переменной без ее объявления должно вызвать ошибку и происходит в "строгом режиме", но если вы не включите это (настоятельно рекомендуется), механизм JS будет неявно объявлять любые необъявленные переменные в global scope.

Это может вызвать всевозможные неприятные проблемы, но здесь особой проблемой было просто то, что три функции-обработчика событий «совместно использовали» одну и ту же переменную el, и поэтому перезаписать его так, как вы заметили.

Принимая во внимание, что если вместо этого вы объявите его как локальную переменную (это сработает так же, как и со старомодным ключевым словом var, но давайте будем современными), с let el = ... эта проблема исчезнет. el воссоздается, указывая на правильный элемент, каждый раз, когда запускается любой из 3 обработчиков событий, и ни один не может влиять на другие.

[Фактически, как указано в других комментариях / ответах, const здесь лучше, чем let]

0 голосов
/ 30 апреля 2020

Если вы сделаете новую ссылку на el как константу. Это исправит вашу проблему.

const myEl = $(this).parent(); // get parent of clicked link

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...