콘텐츠가 AJAX를 통해로드 된 후 jQuery가 작동하지 않음

콘텐츠가 AJAX를 통해로드 된 후 jQuery가 작동하지 않음

---

에 이 페이지 나는 jQuery를 팝업 창을 썸네일 크기 조정 이미지를 가지고있다. 축소판 위에 마우스를 올려 놓으면 이미지 크기가 완벽하게 조정됩니다. 또한 바닥 글에있는 커다란 노란색 TV 버튼 "QuickBook TV"를 클릭하면 원하는대로 팝업이 완벽하게 나타납니다.

그러나 "Next"또는 "Prev"버튼을 클릭하면 AJAX가 새 콘텐츠를로드하는 데 사용되며 jQuery가 더 이상 팝업 또는 축소판 이미지에 대해 작동하지 않습니다. 이 문제에 대한 정보를 찾기 위해 여러 포럼을 검색했지만 jQuery에 대한 지식이 제한되어있어서 무엇을해야하는지 이해할 수 없었습니다.

다음은 팝업 jQuery입니다.

$(document).ready(function() {

        $(".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'); }
        });

        //Example of preserving a JavaScript event for inline calls.
        $("#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;
        });
    });

그리고 이것은 축소판 jQuery입니다.

$(function() {

var xwidth = ($('.image-popout img').width())/1;
var xheight = ($('.image-popout img').height())/1;

$('.image-popout img').css(
        {'width': xwidth, 'height': xheight}
); //By default set the width and height of the image.

$('.image-popout img').parent().css(
        {'width': xwidth, 'height': xheight}
);

$('.image-popout img').hover(
    function() {
        $(this).stop().animate( {
            width   : xwidth * 3,
            height  : xheight * 3,
            margin : -(xwidth/3)
            }, 200
        ); //END FUNCTION

        $(this).addClass('image-popout-shadow');

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

    }
);

});

---

jQuery 선택기는 코드가 실행될 때 DOM에 존재하는 일치하는 요소를 선택하고 동적으로 업데이트하지 않습니다. .hover()이벤트 핸들러 추가 와 같은 함수를 호출하면 해당 요소에만 추가됩니다. AJAX 호출을 수행하고 페이지의 섹션을 바꿀 때 이벤트 핸들러가 바인딩 된 요소를 제거하고 새 요소로 대체합니다. 이러한 요소가 이제 해당 선택자와 일치하더라도 수행 할 코드가 이미 실행 되었기 때문에 이벤트 핸들러가 바인딩되지 않습니다.

이벤트 핸들러

특히 이벤트 핸들러 (예 :)의 .click()경우 이벤트 위임을 사용하여이 문제를 해결할 수 있습니다. 기본 원칙은 모든 동적 (AJAX로드 된) 콘텐츠를 포함 할 정적 (페이지가로드 될 때 존재하며 대체되지 않음) 요소에 이벤트 핸들러를 바인딩하는 것입니다. 이벤트 위임에 대한 자세한 내용은 jQuery 문서를 참조하십시오 .

당신을 위해 click이벤트 핸들러, 업데이트 된 코드는 다음과 같을 것이다 :

$(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;
});

이는 이벤트 핸들러를 전체 문서에 바인딩합니다 (따라서 페이지가 언로드 될 때까지 제거되지 않음) . 속성이 click있는 요소의 이벤트에 반응합니다 . 이상적으로는 DOM의 동적 요소에 더 가까운 것을 사용하는 것이 좋습니다 (아마도 항상 거기에 있고 모든 페이지 콘텐츠를 포함하는 페이지에서) 효율성이 약간 향상되기 때문입니다.idclick<div>

하지만 문제는 처리해야 할 때 발생합니다 .hover(). hoverJavaScript 에는 실제 이벤트 가 없습니다 . 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 플러그인

That covers the event handler bindings. However, that's not all you're doing. You also initialise a jQuery plugin (colorbox), and there's no way to delegate those to elements. You're going to have to simply call those lines again when you've loaded your AJAX content; the simplest way would be to move those into a separate named function that you can then call in both places (on page load and in your AJAX requests success callback):

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');
        }
    });
}

---

Had the same problem before I was able to found the solution which worked for me. So if anyone in future can give it a shot and let me know if it was right since all of the solutions I was able to find were a little more complicated than this.

So as said by Tamer Durgun, we will also place your code inside ajaxStop, so your code will be reinstated each time any event is completed by ajax.

$( document ).ajaxStop(function() {

//your code

}

Worked for me :)

---

            // 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'
                });
            }

---

Your event handlers are being lost when you replace the content. When you set you hover events, jQuery is setting them on the events on the page currently. So when you replace them with ajax, the events are not associated with those elements because they are new.

To fix this you can either call the function that binds them again or you can instead set the event handler on the document as in this answer using $(document).on

That way the event is set on the document and any new elements will get the event called.

---

You can use jQuery ajax's complete function after retrieving data form somewhere, it will see updated elements after ajax complete

---

You Can User jQuery's delegate() method which Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.In my case it's working as expected

this $(selector).click(function(e){}

become this after Using delegate() method

$( "body" ).delegate( "selector", "click", function(e) {}

Hope this will help ;)

---

I'm late to the party but I would combine two of the answers. What worked for my specific needs was to incorporate the ajaxstop within the complete

 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)
           
          })
        }

ReferenceURL : https://stackoverflow.com/questions/16062899/jquery-doesnt-work-after-content-is-loaded-via-ajax