jquery - 在 Rails 中使用 PJax 加载 Doc Ready 上的所有 jQuery 变量

Question

我已经在这个论坛和互联网上搜索了这个问题的答案，但我似乎找不到正确的解决方案/我完全不明白......

我之前设置了一个 Rails 应用程序来展示一个简单的幻灯片。在此，我使用 jQuery 通过移动容器来显示下一张“幻灯片”。然后我决定实现 pxax 来仅加载产量而不是整个页面。除了我的 jQuery 之外，所有这些都工作正常。我看到，如果您添加事件再次触发的 on() 委托(delegate)，但是像 window = $(window) 和 div = $(div) 这样的初始变量不再起作用。

$(function() {

var presentation_carousel = $('.carousel')
var carousel_width = $(".slide").length * 700;
var carousel_max_next = ((carousel_width - 700) * -1);

var view_window = $(window);
var nav_collapse = $('div.nav-collapse');

presentation_carousel.css('width', carousel_width+"px")

$('.button_next').on ('click', function(e) {
    $('.button').animate({
        opacity: 0
    }, 100)
    presentation_carousel.animate({
        'marginLeft' : "-=700px"
    }, 500, function(){
        $('.button').css('display', 'block');
        $('#quiz_carousel .button_next').css('display', 'none');

        $('.button').animate({
            opacity: 1
        }, 500)
    })
});

具体来说，presentation_carousel div 的动态调整大小不再被触发。我还看到，如果我在文档就绪标签中添加标准 console.log，它就不再被触发？

如果有人可以解释 pjax 如何与标准 jQuery 一起工作，并且如果有人可以帮助我解决我的代码，那就太好了？

我确实通过不使用函数内部的变量并每次都跨越 dom 来使一切正常工作。但这感觉有点 hacky...例如

presentation_carousel.animate({}) 
// became
$('.carousel').animate({}) 

非常欢迎对此提供任何帮助或建议。我是 Rails 新手，并且始终乐于接受有关干燥和改进 jQuery 的建议。

谢谢

编辑: 从布局中的 application.html.erb 中调用。这是唯一调用yield 的地方，它位于主容器div 内。

<div class="span9">
  <div data-pjax-container>
    <%= yield %>
  </div>
</div>

Answer 1

内置jquery-pjax events可能就足够了。 $(document).on("pjax:end", handler) 大致相当于 $(document).ready(handler)。当然，您仍然需要用于初始页面加载的就绪处理程序。 ;)