복붙노트

[JQUERY] jQuery를 콘텐츠 후 작업은 AJAX를 통해로드하지 않습니다

JQUERY

jQuery를 콘텐츠 후 작업은 AJAX를 통해로드하지 않습니다

해결법

  1. 1.jQuery를 선택기 코드가 실행되고, 동적으로 업데이트하지 않는 경우 DOM에 존재하는 요소를 일치를 선택합니다. 당신이 .hover은 () 이벤트 핸들러 (들)을 추가하는 등의 함수를 호출 할 때, 그것은 단지 그 요소에 추가합니다. 당신이 AJAX 호출을 수행하고 페이지의 섹션을 교체 할 때, 당신은 바인드 된 이벤트 핸들러와 이러한 요소를 제거하고 새로운 요소로 대체하고 있습니다. 이러한 요소는 지금 셀렉터에 일치 할 경우에도 그들은 그렇게하는 코드가 이미 실행했기 때문에 바인딩 이벤트 핸들러를하지 않습니다.

    jQuery를 선택기 코드가 실행되고, 동적으로 업데이트하지 않는 경우 DOM에 존재하는 요소를 일치를 선택합니다. 당신이 .hover은 () 이벤트 핸들러 (들)을 추가하는 등의 함수를 호출 할 때, 그것은 단지 그 요소에 추가합니다. 당신이 AJAX 호출을 수행하고 페이지의 섹션을 교체 할 때, 당신은 바인드 된 이벤트 핸들러와 이러한 요소를 제거하고 새로운 요소로 대체하고 있습니다. 이러한 요소는 지금 셀렉터에 일치 할 경우에도 그들은 그렇게하는 코드가 이미 실행했기 때문에 바인딩 이벤트 핸들러를하지 않습니다.

    이벤트 핸들러

    특히 이벤트 핸들러 (즉 .click ())이 주위를 얻기 위해 이벤트 위임을 사용할 수 있습니다. 기본 원리는 정적 (페이지가로드, 지금까지 대체되지 않을 때 존재) 동적 모두 포함 할 요소 (AJAX로드) 콘텐츠에 이벤트 처리기를 바인딩 할 것입니다. 당신은 jQuery를 문서의 이벤트 위임에 대한 자세한 내용을보실 수 있습니다.

    당신의 클릭 이벤트 핸들러를 들어, 업데이트 된 코드는 다음과 같을 것이다 :

    $(document).on('click', "#click", function () {
    $('#click').css({
        "background-color": "#f00",
        "color": "#fff",
        "cursor": "inherit"
    }).text("Open this window again and this message will still be here.");
    return false;
});

    즉 클릭의 id 속성 요소의 이벤트를 클릭하여 반응한다 (그래서 페이지 언로드 될 때까지 제거되지 얻을 않습니다) 전체 문서에 이벤트 처리기를 바인딩합니다. 그 효율성을 약간 향상 때문에 이상적으로는, (항상 존재하고 페이지의 모든 콘텐츠가 포함 된 페이지에 아마

    )가 DOM에 가까운 동적 요소에 뭔가를 사용하십시오.

    당신은하지만, () .hover 처리해야 할 때 문제가 온다. 실제 호버 이벤트는 jQuery를 그냥 mouseenter와하는 MouseLeave 이벤트에 이벤트 처리기를 바인딩에 편리한 속기로 그 기능을 제공, 자바 스크립트에 없습니다. 당신은, 그러나, 이벤트 위임을 사용할 수 있습니다 :

    $(document).on({
    mouseenter: function () {
        $(this).stop().animate({
            width: xwidth * 3,
            height: xheight * 3,
            margin: -(xwidth / 3)
        }, 200); //END FUNCTION

        $(this).addClass('image-popout-shadow');
    },
    mouseleave: function () {
        $(this).stop().animate({
            width: xwidth,
            height: xheight,
            margin: 0
        }, 200, function () {
            $(this).removeClass('image-popout-shadow');
        }); //END FUNCTION

    }
}, '.image-popout img');

    jQuery를 플러그인

    즉, 이벤트 핸들러 바인딩을 포함한다. 그러나, 모든 당신이하고있는 아니에요. 또한 jQuery 플러그인 (colorbox) 초기화 및 요소에 그 권한을 위임 할 수있는 방법이 없습니다. 당신은 단순히 당신이 당신의 AJAX의 컨텐츠를로드 한 경우 다시 그 라인을 호출해야 할거야; 가장 간단한 방법은 다음 (페이지로드에와 AJAX 성공 콜백을 요청에서) 두 곳에서 호출 할 수있는 별도의 이름을 기능에 사람들을 이동하는 것입니다 :

    function initialiseColorbox() {
    $(".iframe").colorbox({
        iframe: true,
        width: "1000px",
        height: "500px"
    });
    $(".inline").colorbox({
        inline: true,
        width: "50%"
    });
    $(".callbacks").colorbox({
        onOpen: function () {
            alert('onOpen: colorbox is about to open');
        },
        onLoad: function () {
            alert('onLoad: colorbox has started to load the targeted content');
        },
        onComplete: function () {
            alert('onComplete: colorbox has displayed the loaded content');
        },
        onCleanup: function () {
            alert('onCleanup: colorbox has begun the close process');
        },
        onClosed: function () {
            alert('onClosed: colorbox has completely closed');
        }
    });
}

  2. 2.같은 문제가 있었다 나는 나를 위해 일한 솔루션을 발견 할 수 있었다 전에. 그래서 미래에 누군가가 그에게 기회를주고 그것이 내가 발견 할 수 있었던 모든 솔루션은 조금 더이보다 복잡했다 권리 이후 있다면 알려 주시기 할 수 있습니다.

    같은 문제가 있었다 나는 나를 위해 일한 솔루션을 발견 할 수 있었다 전에. 그래서 미래에 누군가가 그에게 기회를주고 그것이 내가 발견 할 수 있었던 모든 솔루션은 조금 더이보다 복잡했다 권리 이후 있다면 알려 주시기 할 수 있습니다.

    테이머 Durgun가 말했듯이 코드가 어떤 이벤트가 아약스에 의해 완성 될 때마다 복원 있도록 그래서, 우리는 또한, ajaxStop 내부 코드를 배치합니다.

    $( document ).ajaxStop(function() {

//your code

}

    나를 위해 일했다 :)

  3. 3.

    // EXAMPLE FOR JQUERY AJAX COMPLETE FUNC.
$.ajax({
    // get a form template first
    url: "../FPFU/templates/yeni-workout-form.html",
    type: "get",
    success: function(data){
        // insert this template into your container
        $(".content").html(data);
    },
    error: function(){
        alert_fail.removeClass("gizle");
        alert_fail.addClass("goster");
        alert_fail.html("Template getirilemedi.");
    },
    complete: function(){
        // after all done you can manupulate here your new content
        // tinymce yükleme
        tinymce.init({
            selector: '#workout-aciklama'
        });
    }

  4. 4.이 컨텐츠를 교체 할 때 귀하의 이벤트 핸들러가 손실되고있다. 당신이 당신에게 가져가 이벤트를 설정하면, jQuery를 현재 페이지에 이벤트를 설정하는 것입니다. 들은 신규 때문에 아약스로 교체 때, 이벤트가 이러한 요소와 연관되지 않습니다.

    이 컨텐츠를 교체 할 때 귀하의 이벤트 핸들러가 손실되고있다. 당신이 당신에게 가져가 이벤트를 설정하면, jQuery를 현재 페이지에 이벤트를 설정하는 것입니다. 들은 신규 때문에 아약스로 교체 때, 이벤트가 이러한 요소와 연관되지 않습니다.

    $ (문서) CSTE 연구진를 사용하여이 대답으로이 문제를 해결하려면 당신도 바인딩 그들이 다시 함수를 호출하거나 대신 문서의 이벤트 핸들러를 설정할 수 있습니다

    이벤트가 설명서와 새로운 요소에 설정되어 있는지 방법은 이벤트가 호출되는 것입니다.

  5. 5.당신은 아약스 완료 한 후 업데이트 된 요소를 볼 수, jQuery를 어딘가에서 데이터를 검색 한 후 완성 기능을 아약스 사용할 수 있습니다

    당신은 아약스 완료 한 후 업데이트 된 요소를 볼 수, jQuery를 어딘가에서 데이터를 검색 한 후 완성 기능을 아약스 사용할 수 있습니다

  6. 6.당신은 사용자 jQuery의 위임 ()가 작동하고 내 경우를 elements.In 루트의 특정 설정을 기반으로, 현재 또는 미래에 선택을, 일치하는 모든 요소에 대해 하나 개 이상의 이벤트에 핸들러를 연결 방법을 예상 할 수있는

    당신은 사용자 jQuery의 위임 ()가 작동하고 내 경우를 elements.In 루트의 특정 설정을 기반으로, 현재 또는 미래에 선택을, 일치하는 모든 요소에 대해 하나 개 이상의 이벤트에 핸들러를 연결 방법을 예상 할 수있는

    이 $ (선택) .click (기능 (전자) {}

    델리게이트 () 메소드를 사용 후에이 될

    $ ( "몸") .delegate ( "선택", "클릭", 기능 (전자) {}

    이 의지의 도움을 희망;)

  7. 7.이것은 나를 위해 일한

    이것은 나를 위해 일한

    대신에:

    $(document).ready(function(){
//code
});

    내가 그랬어 :

    $(document).on('mouseenter', function(){
//code
});

  8. 8.나는 파티에 늦었 어하지만 난 대답이 결합 할 것이다. 무엇 내 특정 요구에 근무하는 전체 내 ajaxstop을 통합했다

    나는 파티에 늦었 어하지만 난 대답이 결합 할 것이다. 무엇 내 특정 요구에 근무하는 전체 내 ajaxstop을 통합했다

    complete: function () {
     $( document ).ajaxStop(function() {
         //now that all have been added to the dom, you can put in some code for your needs.
         console.log($(".subareafilterActive").get().length)

     })
}

  9. 9.그냥 대안.

    그냥 대안.

    $(window).on('load', _ => {
    // some jQuery code ..
})

    이 창에 대한 위임 된 처리기를 바인딩합니다. 윈도우가 완전히 모든 그래픽 / 포함 / 후크 / 요청뿐만 아니라 DOM을 포함하여로드되면이 실행됩니다.

    $ (문서) (.ready _ => ... 보존 이벤트 만 DOM 특정 요소가 완전히 때 함수 또는 이벤트를 실행할 수 있습니다 AJAX. 어느 동적으로로드 된 내용을에 적용되지 않는 준비 후 발사한다 위의 그림과 같이 @Anthony 제분 용 곡물 창에 그의 대답 또는 바인드 부하 이벤트에 설명 된대로 그것을 정의하여로드.

    https://api.jquery.com/load-event/ https://api.jquery.com/on/#on-events-selector-data-handler

    10. from https://stackoverflow.com/questions/16062899/jquery-doesnt-work-after-content-is-loaded-via-ajax by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 이 jQuery를 준비 기능의 차이점은 무엇입니까?  (0) 2020.10.06
[JQUERY] 로컬 파일을 열 수 없습니다 - 크롬 : 로컬 리소스를로드 할 수 없음  (0) 2020.10.06
[JQUERY] 웹 서비스 반환에 jQuery를 호출 "아니 운송"오류  (0) 2020.10.06
[JQUERY] $ (문서) .ready 필요가 있습니까?  (0) 2020.10.06
[JQUERY] 이미지의 jQuery 이벤트는로드  (0) 2020.10.06
,

티스토리툴바