如何使用 jQuery 的 .on 和 Rails ajax 链接？

Question

我在让 jQuery 的 .on 与我的 Rails ajax 链接一起工作时遇到了很多问题。

具体来说，我有这个链接：

<div id="item_7_tools" class="item_tools">        
    <a rel="nofollow" id="book_item_7" data-remote="true" data-method="post" class="book_link" href="bookings">Book this item</a>
</div>

我已经修剪了 HTML 中的一些文本，但足以说明这一点，并且我的控制器响应工作正常。 我单击“预订此项目”，它转到控制器，控制器发挥作用，然后发回替换该 div 内容的部分。

所以我现在尝试在加载工作时用 ajax 微调器替换内容，这就是它的梨形。

我正在尝试最初的一堆 jQuery 代码，只是为了确保我的 javascript 工作正常：

$('div.item_tools')
    .on('click', 'a', function() {
        console.log("clicky click")
    })
    .on('ajax:beforeSend', "a", function() {
        console.log('the a in div.item_tools is sending its ajax command');
    })
    .on('ajax:complete', "a", function() {
        console.log('ajax request completed');
    })  

我对此的理解是，当我单击位于具有 item_tools 类的元素中的任何链接 (a) 时，它将冒泡到此函数，然后将消息记录到控制台中。同样，触发了 ajax 请求的链接也会得到同样的处理…… （假设我可以让它工作，那么我会去工作做 ajax 加载器微调器）。

相反，我看到的行为是，当我单击链接时，我的控制台中没有出现任何消​​息（在 firefox 和 chrome 上都尝试此操作），并且我的 ajax 链接关闭并正确执行了它的操作。只是完全忽略了javascript... 这是因为我单击 ajax 链接以某种方式阻止了单击事件冒泡吗？我知道有办法做到这一点，但我认为我在任何地方都不是故意这样做的。除非 OOTB rails/ujs 那样做？

所以我的问题：

1. 有没有办法知道绑定了绑定的内容？
2. 我的 javascript 做错了什么？

谢谢！

Answer 1

我一直都在使用它……而且它似乎工作正常。

您是否尝试过添加.on('ajax:success')？

除了尝试将每一行的. 放在前一行...？它有可能到达$('div.item_tools')，然后根据javascript的标准自动插入一个分号......虽然如果是这样的话，我希望它会在下一个给你一个关于.的JS错误线。无论如何尝试将其更改为：

$('div.item_tools').
  on('click', 'a', function() {
    console.log("clicky click")
  }).
  on('ajax:beforeSend', "a", function() {
    console.log('the a in div.item_tools is sending its ajax command');
  }).
  on('ajax:complete', "a", function() {
    console.log('ajax request completed');
  })

如果情况变得更糟，请尝试这样做：

$("a").on("ajax:success", function(){
  console.log('ajax:success done');
})

看看它是否在没有事件委托的情况下工作......

然后改成这样：

$(document).on("ajax:success", "a", function(){
  console.log("ajax:success with delegation to document");
})

看看委派是否一直有效，而不仅仅是你的item_tools

你确定你把所有东西都命名正确了吗？在你的标记中是div.item_tools a？

Answer 2

原来是在 DOM 加载之前触发了 javascript，这意味着内容没有被绑定...

$(function () {
    $('div.item_tools')
        .on('click', 'a', function itemToolsAjaxy() {
            console.log("clicky click");
        })
        .on('ajax:beforeSend', "a", function() {
            console.log('the a in div.item_tools is sending its ajax command');
            $(this).closest('div').html('<img src=/assets/ajax-loader.gif>');
        })
});

在开头添加了$(function())，它将绑定延迟到 DOM 加载后，然后它开始工作。 通过使用 Chrome 开发人员工具在div.item_tools 选择器上插入一个中断并观察浏览器在加载 DOM 之前点击它来解决这个问题。 /facepalm

（我删除了.on('ajax:complete') 回调，因为事实证明存在一个已知限制，即原始触发器元素不再存在，因为它已被替换，因此无需执行回调。与我原来的问题无关，但我想我会提到它。）

Answer 3

据我所知，您可以通过 2 种方式执行 ajax 操作：

1. 通过使用:remote => true
2. 通过使用 jQuery 的$.ajax（或$.post）。

使用数字 2，请务必更改您的 href='#'

我的建议是删除 :remote => true 并手动进行 jQuery ajax 调用。这样你就可以使用 beforeSend、complete 等。

如果我在这里偏离了轨道，也请有人帮我澄清一下。