0

我在让 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 加载器微调器）。

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

所以我的问题：

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

谢谢！

4

3 回答 3

0

事实证明，在 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')回调，因为事实证明存在一个已知限制，原始触发元素不再存在，因为它已被替换，因此没有什么可以执行回调。与我原来的问题无关，但我认为我提一下。）

于 2013-04-18T10:21:02.370 回答
0

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

你试过添加一个.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在你的标记中？

于 2013-04-17T22:15:59.410 回答
-1

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

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

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

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

如果我在这里偏离轨道，也请有人帮助我澄清事情。

于 2013-04-17T18:39:54.573 回答