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

我对此的理解是，当我单击位于具有a类的元素内的任何链接（item_tools）时，它将冒泡到此函数，然后记录消息进入控制台。同样，触发了ajax请求的链接也会得到相同的处理...... （假设我可以使用它，那么我将去做ajax loader spinner）。

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

所以我的问题：

有没有办法告诉它附有什么绑定？
我的javascript出错了什么？

谢谢！

Answer 1

我一直都在使用它......它似乎工作正常。

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

除此之外，尝试将.放在前一行的每一行......？它可能会到达$('div.item_tools')，然后按照javascript的标准自动插入一个分号...虽然如果是这样的话我希望它会给你一个关于{{1}的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吗？

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之前就已经看到了这一点。 /捂脸

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

Answer 3

据我所知，你可以用两种方式做ajax：

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

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

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

如果我偏离这里，有人请帮助我澄清一些事情。

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

3 个答案: