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 をクロスすることで、すべてが機能するようになりました。ただし、これは少しハッキーに感じました...

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)です。当然のことながら、最初のページの読み込みにはまだ ready ハンドラーが必要です。;)

于 2012-05-03T14:24:09.183 に答える