javascript - jQuery "loading"微调器停止工作

Question

以下代码在我的 Rails 应用程序中运行了一段时间:

 $(function () {

     // Change the link's icon while the request is performing
     $(document).on('click', 'a[data-remote]', function () {
         var icon = $(this).find('i');
         icon.data('old-class', icon.attr('class'));
         icon.attr('class', 'glyphicon glyphicon-refresh spin');
     });

    // Change the link's icon back after it's finished.
    $(document).on('ajax:complete', function (e) {
        var icon = $(e.target).find('i');
        if (icon.data('old-class')) {
            icon.attr('class', icon.data('old-class'));
            icon.data('old-class', null);
        }
    })

}

代码用“刷新”字形图标替换字形图标，并旋转它直到 AJAX 请求完成，然后将其替换为原始字形图标。

我最近注意到代码已停止工作。 AJAX 请求工作正常，但在 AJAX 调用期间我不再收到旋转刷新字形图标。升级到 Rails 5.1 可能导致了该问题。

我的 Gemfile 中有 gem 'jquery-rails'，所以我认为 Rails 5.1 升级是完全向后兼容的。可能是其他一些变化导致了这个问题。

我已更新第一个函数，如下所示:

$('a[data-remote]').on('click', function () {
    var icon = $(this).find('i');
    icon.data('old-class', icon.attr('class'));
    icon.attr('class', 'glyphicon glyphicon-refresh spin');
});

这在第一次单击按钮时有效，但如果再次单击同一按钮，我就看不到微调器。

这个问题有没有解决方案，最好使用标准 DOM API？我搞砸了:

document.querySelectorAll('[data-remote]').onclick = function () { ... }

但还没有任何运气。

我已经接近可行的答案了吗？这是使用 addEventListener 的良好候选者吗？

Answer 1

@Jeff 可能是对的，您正在替换链接元素并失去监听器。使用 $(document).on('click', 'a[data-remote]', ...) 模式不会出现问题，因为事件会在添加到文档 < 的元素上触发em>在声明事件处理程序将被捕获之后(参见 this question )。问题是某些东西似乎阻止了链接 click 事件冒泡到 document，并且无法调用监听器函数。

绑定(bind)到 body 而不是 document 似乎可以解决该问题:

$("body").on('click', 'a[data-remote]', function () {
     var icon = $(this).find('i');
     icon.data('old-class', icon.attr('class'));
     icon.attr('class', 'glyphicon glyphicon-refresh spin');
 });