3

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

我之前设置了一个 rails 应用程序来展示一个简单的幻灯片。在此，我使用 jQuery 通过移动容器来显示下一张“幻灯片”。然后我决定实施 pxax 只加载产量而不是整页。除了我的 jQuery，所有这些都可以正常工作。我看到，如果您添加 on() 委托，该事件会再次触发，但是我的 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>
4

1 回答 1

1

内置的jquery-pjax 事件可能就足够了。$(document).on("pjax:end", handler)大致相当于$(document).ready(handler)。自然，您仍然需要准备好的处理程序来进行初始页面加载。;)

于 2012-05-03T14:24:09.183 回答