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);
        }
    })

}

代码用“刷新”glyphicon替换glyphicon并旋转它直到AJAX请求完成，然后用原始glyphicon替换它。

我最近注意到代码已经停止工作了。 AJAX请求工作正常，但在AJAX调用期间我不再获得旋转刷新glyphicon。升级到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

您的ajax请求是否还刷新了包含原始侦听器的元素？发生什么事听起来像听众已经消失了。

res.title并且监听器告诉微调器旋转。
AJAX调用可能会替换页面上的一些元素，包括原始的$('a[data-remote]')元素。

因为在ajax页面加载/刷新后没有再次添加监听器，所以第二次单击该按钮将不起作用。

只是一个假设，但您也可以在点击处理程序中添加$('a[data-remote]')并打开Google Chrome扩展程序工具。查看每次单击按钮时脚本是否暂停。

使用基本修复更新：

debugger

依赖于您确保两个按钮在DOM上的相同位置设置样式。

Answer 2

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

绑定到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'); });

jQuery“loading”微调器停止工作

2 个答案: