pjax에서 스크립트/코드를 시작하지 않았습니다: 끝, 무슨 생각이 있습니까?

묘사

안녕@mislav, 좋은 플러그인을 제공해 주셔서 감사합니다.
pjax가 완성/끝났을 때, 스크립트를 다시 채우는 작은 문제에 부딪혔습니다.이 페이지의 브라우저를 새로 고치면 스크립트가 정상적으로 작동할 수 있지만, 기본적으로 pjax를 시작할 때, 스크립트가 시작되지 않습니다.
예를 들어 나는 이 함수를 가지고 있다.

function imageSizes() {
    $('.chronology-container .each-chronology .image-container, body.works-detail .image-container').each(function() {
        var div = $(this);
        var img = $('img', div);
        if ( img.height() < img.width() ) {
            div.addClass('landscape');
        } else {
            div.addClass('portrait');
        }
    });
}

pjax에 대해 나는 다음과 같은 것이 있다.

$(document).on('ready pjax:end', function() {
    imageSizes();
    $('.loader').fadeOut();
});

하지만 내가 리셋하기 전에 스크립트는 영원히 작용하지 않을 거야...무슨 생각 있어요?내가 이렇게 하는 게 맞나?이것은 단지 하나의 예일 뿐이지만, 동위원소에서 맞춤형 스크립트까지 pjax에서 시작하는 경우는 드물다.이상하게도, 마운트 프로그램이 항상 꺼져서, 나는 그것이 무엇을 하는지 안다.
건배,
R

토론 #1

이벤트 처리 프로그램이 올바르게 표시됩니다.마운트 프로그램은 pjax가 완성된 후에 사라진다고 말했기 때문에 imageSizes 호출될 것입니다.문제는 이 함수가 무엇을 하고 있는지에 있을 것이다.코드에 로그 기록이나 디버깅 문장을 추가하는 것은 이곳에서 무슨 일이 일어났는지, 어느 단계에서 무슨 일이 일어났는지 확인하는 가장 빠른 방법이다.네가 이렇게 하는 것을 막을 수 있는 것이 뭐가 있니?

토론 #2

@mislav 도와 주셔서 감사합니다.만약 뚜렷하지 않다면, 나는 좀 더 파낼 것이다.감사합니다!

토론 #셋

@mislav 나는 이 문제를 다시 토론해야 한다. 왜냐하면 나는 정말 이 문제에 갇혔기 때문이다.그것은 나의 다른 스크립트에 영향을 주고 있다. (때로는 터치할 수도 있고, 때로는 일치하지 않을 수도 있다.)콘솔이 추가되었습니다.imageSizes 함수의log문장은 컨트롤러에서 자극을 받고 있음을 나타낸다.그러나 내용적으로는 너무 일찍 발사된 것이 분명하다.만약 내가 동시에 ready pjax:end를 사용하면 콘솔에 두 번 표시됩니까?pjax:EndFire는 도대체 언제 끝납니까?

토론 #4

pjax:end는 새 컨텐트를 가져오는 XHR 요청을 완료하고 DOM에 새 HTML을 주입한 후 발생시킵니다.나는 너의 응용 프로그램에 무슨 문제가 있는지 모르겠다. 왜냐하면 나는 그것의 전체 코드를 볼 수 없고, 문제가 어디에서 발생했는지도 분명하지 않기 때문이다."내 스크립트는 영원히 시작되지 않습니다"는 당신을 제외한 누구에게도 디버깅하기 어려운 문제입니다.

토론 #5

답변 감사합니다.나는 정말 이 문제를 해결하고 싶다. 너는 나에게서 무엇을 얻고 싶니?무엇이 우리가 어디에 문제가 생겼는지 찾아내는 것을 도울 수 있습니까?나는 진일보한 코드 업데이트를 발표할 것이다...

토론 #6

다시 안녕하세요 @mislav...
그래, 예를 들어, 내 스크립트 맨 위에 있어.js 파일, 나는 많은 함수를 설정했는데 그 중 하나는 다음과 같다.

function imageSizes() {
    $('body.works-detail .image-container').each(function() {
        var div = $(this);
        var img = $('img', div);
        if ( img.height() < img.width() ) {
            div.addClass('landscape');
        } else {
            div.addClass('portrait');
        }
    });
}
imageSizes();

그리고 이 모든 것 뒤에 pjax 설정 두 개가 있습니다.하나는 기능을 누르는 데 사용되고, 하나는 데이터 pjax와 링크하는 데 사용됩니다.

$.pjax.defaults.scrollTo = false;
$.pjax.defaults.timeout = 200000;

if ($.support.pjax) {
    $(document).on('click', 'a[data-pjax-detail]', function(e) {
        e.preventDefault();
        $('.loader').show();
        $('body').removeClass('detail-loaded');
        if ( $(this).is('.prev') ) {
            $('body').addClass('detail-loading-prev');
        } else {
            $('body').addClass('detail-loading-next');   
        }
        var url = $(this).attr('href');
        $('#pjax.content').one(window.transitionEnd, function() {
            $.pjax({
                url: url,
                container: '#pjax.content',
                //fragment: '#pjax.content',
                timeout: 200000
            });
            if ( $('body').is('.detail-loading-prev') ) {
                $('body').removeClass('detail-loading-prev detail-almost-loaded-prev detail-loading-next detail-almost-loaded-next').addClass('detail-almost-loaded-prev');
            } else {
                $('body').removeClass('detail-loading-prev detail-almost-loaded-prev detail-loading-next detail-almost-loaded-next').addClass('detail-almost-loaded-next');   
            }
        });
    });
    $(document).on('ready pjax:end', function() {
        $('body').removeClass('detail-loading-prev detail-loading-next').addClass('detail-loaded');
    });
}

$(document).pjax('a[data-pjax]', '#pjax.content');

$(document).on('ready pjax:start', function() {
    $('.loader').show();
});
$(document).on('ready pjax:end', function() {
    imageSizes();
    var bodyClass = $('meta[name=body-class]').attr('content');
    if (bodyClass !== undefined) { document.body.className = bodyClass; }
    $('.loader').fadeOut();
});

만약 내가 특별히 잘못된 일을 했다면, 이것은 당신이 나의 설정을 이해하는 데 도움을 줄 수 있기를 바랍니다.예를 들어, 내가 data-pjax-detail 링크를 눌렀을 때 imageSizes 함수는 컨트롤러를 통해 시작되었다는 것을 나타낸다.일지 테스트는 무작위로 말하자면, 예를 들면, 초상화는 풍경화이고, 반대로도 그렇다. 그러면 때로는 옳고 때로는 옳지 않다.내 문제 봐...이것은 결코 일치하지 않는다.이것은 사용 imageSizes 의 예이며, 내가 사용하는 다른 함수는 모두 같다.

토론 #7

죄송합니다. 여기에 제공된 정보가 부족하여 저희는 어떠한 건의도 할 수 없습니다.듣자하니 이것은 아마도 이 프로젝트의 사용 문제일 것이다. 우리 코드의 오류가 아니라.만약 이것이 버그라고 생각한다면, 복사 절차와 같은 더 많은 정보를 다시 열고 제공해 주십시오.감사합니다!