jQuery“加载”微调器停止工作

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]', ...) 模式的问题，因为在声明事件处理程序之后添加到文档的元素上触发的事件 将被捕获（请参阅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');
 });

Answer 2

您的 ajax 请求是否还会刷新具有原始侦听器的元素？发生的事情听起来像是听者不见了。

1. $('a[data-remote]') 被点击，监听器告诉微调器旋转。

2. AJAX 调用可能会替换页面上的某些元素，包括原始的 $('a[data-remote]') 元素。

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

只是一个假设，但您也可以在点击处理程序中添加 debugger 并打开 google chrome 扩展工具。查看每次单击按钮时脚本是否暂停。

基本修复更新：

function toggleIcons() {
  $('.regularIcon').toggle();
  $('.spinningIcon').toggle();
}

function toggleButtons() {
  $('.postButton').toggle();
  $('.deleteButton').toggle();
}

$('.postButton').click(function(e) {
  e.preventDefault();
  toggleIcons();

  // ajax call here
  $.ajax({
    type: "GET",
    url: "/route",
    data: data,
    dataType: "JSON",
  }).success(function(json) {
    toggleIcons();
    toggleButtons();
  })
});

// Listener for deleteButton
$('.deleteButton').click(function(e) {
  e.preventDefault();
  toggleIcons();

  // ajax call here
  $.ajax({
    type: "GET",
    url: "/route",
    data: data,
    dataType: "JSON",
  }).success(function(json) {
    toggleIcons();
    toggleButtons();
  })
});

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