单击时，Ajax 结果始终更新上次单击的元素

Question

考虑下面的代码，如果我连续点击 3 个链接，最后点击的"部分"更新 3 次，前 2 个 remane 相同。(假设您在 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变量在每次点击时都会更新，并且"then"始终使用最新的el

如何在每个点击事件之间隔离父元素？

我尝试在$.ajax中使用success&complete函数，但this&$(this)不再是点击的元素。

Answer 1

问题似乎只是el变量从未在任何地方正式声明过。使用变量而不声明它应该会抛出错误，并且在"严格模式"下会抛出错误，但除非您选择加入(强烈推荐)，否则 JS 引擎将隐式声明全局范围内的任何未声明变量。

Tha 可能会导致各种令人讨厌的问题，但这里的特定问题只是三个事件处理程序函数"共享"同一个el变量，因此以您观察到的方式覆盖它。

而如果你把它声明为局部变量(这与"老式"var关键字同样有效，但让我们变得现代)，有了let el = ...，这个问题就消失了。 每次运行 3 个事件处理程序中的任何一个时，都会重新创建指向正确的元素el，并且没有一个可以影响其他处理程序。

[事实上，正如其他评论/答案所指出的，const在这里比let更好]

Answer 2

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

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