单击ajax结果总是更新最后单击的元素

Question

考虑以下代码，如果我连续单击3个链接，则最后单击的“节”将更新3次，前2个保留不变。 （假设您在ajax完成之前单击3个链接）

<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)不再是单击的元素。

Answer 1

您是否尝试过e.stopImmediatePropagation();？这样可以避免多次触发该事件。

Answer 2

如果重新引用el作为常量。它将解决您的问题。

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

Answer 3

问题似乎很简单，el变量从未在任何地方正式声明过。使用变量而不声明它[会引发错误，并且在“严格模式”下执行，但是除非您选择加入（强烈建议），否则JS引擎将在global]中隐式声明任何未声明的变量。 >范围。[Tha可能会引起各种麻烦的问题，但是这里的特殊问题仅仅是三个事件处理程序函数“共享”了相同的el变量，因此以您观察的方式覆盖了它。

如果您改为将其声明为局部变量（这与“老式” var关键字同样有效，但让我们成为现代人），使用let el = ...，此问题就消失了。每次运行3个事件处理程序中的任何一个时，都会重新创建el，并指向正确的元素，并且没有一个会影响其他事件处理程序。